css破解和重写

  • 本文关键字:重写 破解 css css
  • 更新时间 :
  • 英文 :


我已经停止在不同的浏览器中使用CSS技巧,而是倾向于"条件注释将类添加到html标记中"的方法。

这就引出了我的问题。如果没有破解,我该如何写这个ie8破解

.grab-cursor{cursor:move/;}

我希望实现:

.ie8 .grab-cursor{——此处为非黑代码——;}

(我从来没有真正理解css技巧,所以我很高兴现在不必使用它们!)

.grab-cursor{cursor:move;}

你真的不需要任何破解或评论,它应该在所有浏览器中都能很好地工作(请参阅http://www.quirksmode.org/css/cursor.html)。你想解决的问题到底是什么?

编辑

为了回答如何在没有黑客攻击的情况下将某些样式应用于某些版本的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 */

最新更新