2012-01-26 2 views
0

Я прекратил использовать хаки CSS для разных браузеров и вместо этого предпочитаю подход «условные комментарии добавления классов в html-тег».css взломать и переписать их

Это подводит меня к моему вопросу. Как я могу написать это ie8 hack без взлома?

.grab-cursor{cursor:move\0/;}

Я ищу для реализации:

.ie8 .grab-cursor{ --non взломан код here-- ;}

(я никогда не понимал CSS хаков, так что я рад, что не придется используйте их сейчас!)

+1

Что делает этот взлом? – Bojangles

+0

'style: property \ 0 /;' это правило, которое интерпретируется только Internet Explorer 8 и 9. '* style: property;' будет соответствующим взломом для Internet Explorer 6 и 7 – ramsesoriginal

ответ

3
.grab-cursor{cursor:move;} 

Вам действительно не нужны какие-либо взломы или комментарии здесь, он должен хорошо работать на всех браузерами (см. http://www.quirksmode.org/css/cursor.html). В чем именно проблема, которую вы пытаетесь решить?

EDIT

Чтобы ответить на общий вопрос о том, как применить определенные стили к определенным версиям IE без хаков, если вы используете условный блок комментария

<!doctype html> 
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--> 
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]--> 
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> 

у вас есть различные возможности.

Если вы просто хотите, чтобы исправить общую проблему Internet Explorer, вы можете использовать

.oldie .grab-cursor { 
    /*IE-tailored css styles without the hack*/ 
} 

и вы установлены. Если вы хотите, чтобы исправить что-то для, скажем, IE7, вы можете использовать

.ie7 .grab-cursor { 
    /*IE-tailored css styles without the hack*/ 
} 

, но лучший способ, чтобы исправить некоторые проблемы было бы использовать Modernizr (http://www.modernizr.com/), так что вы можете делать такие вещи, как

/* style I'm currently using in production */ 
.cssgradients #main nav{ 
    background: linear-gradient(left, black, #e00, black); 
} 

.no-cssgradients nav{ 
    background: url(../img/nav-bg.png) center center repeat-y; /*image background as fallback */ 
} 

Я хотел бы также рекомендовать http://leaverou.github.com/prefixfree/, так как это позволяет вам иметь

background: radial-gradient(center, ellipse cover, #000000 49%,#8f0222 49%,#6d0019 100%); 

вместо

background: #000000; /* Old browsers */ 
background: -moz-radial-gradient(center, ellipse cover, #000000 49%, #8f0222 49%, #6d0019 100%); /* FF3.6+ */ 
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(49%,#000000), color-stop(49%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */ 
background: -webkit-radial-gradient(center, ellipse cover, #000000 49%,#8f0222 49%,#6d0019 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-radial-gradient(center, ellipse cover, #000000 49%,#8f0222 49%,#6d0019 100%); /* Opera 12+ */ 
background: -ms-radial-gradient(center, ellipse cover, #000000 49%,#8f0222 49%,#6d0019 100%); /* IE10+ */ 
background: radial-gradient(center, ellipse cover, #000000 49%,#8f0222 49%,#6d0019 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#6d0019',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 
+0

Хорошая точка. Я обновил свой пост, чтобы уточнить – ramsesoriginal

+0

Спасибо, я уже использую блок условных комментариев и модернизатора, но никогда не знал о префиксе Free! –

+0

Добро пожаловать! – ramsesoriginal

Смежные вопросы