针对class、id所做的CSS HACK

2016-02-19 23:18 2 1 收藏

想要天天向上,就要懂得享受学习。图老师为大家推荐针对class、id所做的CSS HACK,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

【 tulaoshi.com - Web开发 】

这是一篇关于CSS HACK的文章,这篇文章中提到的CSS HACK是针对class、id中属性的HACK,排列的顺序都具有要求。今天要和大家说的是针对class、id所做的CSS HACK。

.test{/*FF*/
    height:20px;
    background-color:orange;
}
*+html .test{/*IE7*/
    height:20px;
    background-color:blue;
}
*html .test{/*IE6*/
    height:20px;
    background-color:black;
}

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

通过上面的CSS代码可以看出FF还是最听话的浏览器,在IE6和IE7如果要使用HACK必须要在前面加上夫级标签html。这里就很好记忆了,IE6加*html,而IE7加*+html,暗示加了一个版本。通过对class、id所做的CSS HACK好处在于不用顾及前后顺序,而且便于管理和其他人员接受,还可以通过这种HACK实现类似JS浏览器版本的控制。缺点嘛可能就是产生大量的代码吧!好了,大致就先说说这些。
                   
上面内容看完可以点击下面的效果在不同浏览器来看看效果,其中橙色代表FF,蓝色代表IE7,黑色代表IE6。大家可以自行测试

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titleCSS hack/title
style type="text/css"
*{
 margin:0;
 padding:0;
}
.test{/*FF*/
 height:20px;
 background-color:orange;
}
*+html .test{/*IE7*/
 height:20px;
 background-color:blue;
}
*html .test{/*IE6*/
 height:20px;
 background-color:black;
}
/style
/head
 div class="test"/div
body
/body
/html

来源:https://www.tulaoshi.com/n/20160219/1629620.html

延伸阅读
标签: Web开发
写完第七课,因为时间问题没有继续写第八课有关浏览器兼容方面的文章,以为大家可以自己掌握这方面的知识,不过发现有很多同学找了很多资料,很多文章去研究,费时费力的,效果也不好,今天是星期六,我呢就再给大家补写这篇教程,带领大家用最短的时间掌握CSS Hack! 说到浏览器兼容性问题,就必须说CSS Hack!提到Hack大家肯定会想到电脑...
标签: Web开发
比较常用的是只对IE进行hack,常见的写法有以下几种: 1. IE条件注释 !-- [ if IE]link href="ie.css" rel="stylesheet" type="text/css" /![endif]-- 还可只对某一IE版本或以下版本hack 2. html/body标签中写class hook 比如使用jQuery Browser Plugin后通过firefox浏览页面html被附加上这样的class html ...
标签: Web开发
原文:http://andymao.com/andy/post/76.html 屏蔽IE浏览器(也就是IE下不显示) *:lang(zh) select {font:12px  !important;} /*FF的专用*/ select:empty {font:12px  !important;} /*safari可见*/ 这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。 仅IE7识别 *+html  {…} 当面临需...
标签: Web开发
人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容,CSS HACK自然而然地被我们想起。今天,我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事,需要我们有统一的规范来进行Coding,以方便维护。而解决兼容...
标签: Web开发
结合了富有新的语义化标记的HTML5,CSS3为web设计师们的网页提供了神一般的力量。有了HTML5的能量,我们将得到更多的对文档代码的控制权,有了CSS3的能量,我们的控制权将趋于无穷大! 即使没有那些高级的CSS选择器,我们仍然可以通过强大的HTML5条调用不同的容器而不劳驾class和id这类属性。像以往的DIV布局,我们在css中可能要这...

经验教程

442

收藏

79
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部