不同的浏览器, 比如 Internet Explorer 6,Internet Explorer 7,Mozilla Firefox 等, 对 CSS 的解析认识不一样, 因此会导致生成的页面效果不一样, 得不到我们所需要的页面效果.
我们需要针对不同的浏览器去写不同的 CSS, 让它能够兼容不同的浏览器, 在不同的浏览器中也能得到我们想要的页面效果. 这个针对不同的浏览器写不同的 CSS code 的过程, 就叫 CSS hack, 也叫写 CSS hack.
由于不同的浏览器对 CSS 的支持及解析结果不一样, 还由于 CSS 中的优先级的关系. 我们就可以根据这个来针对不同的浏览器来写不同的 CSS.
比如 IE6 能识别下划线 "_" 和星号 "*",IE7 能识别星号 "*", 但不能识别下划线 "_", 而 Firefox 两个都不能认识. 等等
书写顺序, 一般是将识别能力强的浏览器的 CSS 写在后面. 下面列举常用的 CSS hack 方法:
1:!important
!important 作用是提高指定样式规则的应用优先权.
IE7 以及所有标准浏览器能识别! important
区别 IE6 与 IE7 与其他浏览器
- .browserTest
- {
- border:20px solid #60A179 !important;
- border:20px solid #00F;
- }
在 Mozilla 中或者 IE7 浏览时候, 能够理解! important 的优先级, 因此显示 #60A179 的颜色, 在 IE6 中浏览时候, 不能够理解! important 的优先级, 因此显示 #00F 的颜色.
2:*
IE 都能识别 *; 标准浏览器 (如火狐) 不能识别 *
区别 IE6 与火狐
- .browserTest
- {
- border:20px solid #60A179;
- *border:20px solid #00F;
- }
区别 IE7 与火狐
- .browserTest
- {
- border:20px solid #60A179;
- *border:20px solid #00F;
- }
区别 IE7,IE6 与火狐
- .browserTest
- {
- border:20px solid #60A179;
- *border:20px solid #00F !important;
- *border:20px solid ###;
- }
- 3:_
IE6 支持下划线, IE7 和 Firefox 均不支持下划线
区别 IE7,IE6 与火狐
- .browserTest
- {
- border:20px solid #60A179;
- *border:20px solid #00F;
- _border:20px solid ###;
- }
- /* 不管是什么方法, 书写的顺序都是 Firefox 的写在前面, IE7 的写在中间, IE6 的写在最后面 */
4:*+html 与 *HTML
*+HTML 与 *HTML 是 IE 特有的标签, Firefox 暂不支持. 而 *+HTML 又为 IE7 特有标签
- .browserTest {
- width: 120px;
- } /* Firefox fixed */
- *HTML .browserTest {
- width: 80px;
- } /* ie6 fixed */
- *+HTML .browserTest {
- width: 60px;
- } /* ie7 fixed */
注意:
*+HTML 对 IE7 的 HACK 必须保证 HTML 顶部有如下声明:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
- /*****************************************************************************/
以下是一些常用的 CSS 兼容技巧
1)火狐下给 div 设置 padding 后会导致 width 和 height 增加, 但 IE 不会.(可用! important 解决)
2)垂直居中, 将 line-height 设置为当前 div 相同的高度, 再通过 vertical-align: middle;( 注意内容不要换行)
3)水平居中, margin:0 auto;(当然不是万能)
4)若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)
5)浮动 IE 产生的双倍距离
在 IE 下, 当一个 div 设置了 float 后, 然后给他设置 margin, 就会出现加倍的 margin, 解决的办法是给 div 设置 display:inline.
<div id="float"></div>
相应的 CSS 为
- #float
- {
- float:left;
- margin:5px;/*IE 下理解为 10px*/
- display:inline;/*IE 下再理解为 5px*/
- }
Block 元素的特点是: 总是在新行上开始, 高度, 宽度, 行高, 边距都可以控制(块元素);Inline 元素的特点是: 和其他元素在同一行上,... 不可控制(内嵌元素);
6)IE 和 FF 对盒模型的解释区别
- #browserTest{
- width: 650px !important;width:
- 648px;padding-left:2px;background:#fff;
- }
browserTest 显示的宽度是 650px;
IE Box 的总宽度是: width+padding+border+margin 宽度总和;
FF Box 的总宽度就是: width 的宽度, padding+border+margin 的宽度在含在 width 内.
如果有 BOX{WIDTH:"300"; PADDING:"5PX";}
则 BOX 在 IE 的宽度应该为: 310
而在 FF 的宽度则是 300
所以在 BOX 有填充的情况下应该这样使用
BOX{WIDTH:"300" !IMPORTANT; WIDTH:"290";}
7)ul 标签在 FF 下面默认有 list-style 和 padding, 最好事先声明, 以避免不必要的麻烦;(常见于导航标签和内容列表)
8)作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden; 以达到高度自适应;
9)页面的最小宽度
min-width 是个非常方便的 CSS 命令, 它可以指定元素最小也不能小于某个宽度, 这样就能保证排版一直正确. 但 IE 不认得这个, 而它实际上把 width 当做最小宽度来使.
为了让这一命令在 IE 上也能用, 可以把一个 < div> 放到 <body> 标签下, 然后为 div 指定一个类:
然后 CSS 这样设计:
- #container{
- min-width: 600px;
- width:expression(document.body.clientWidth <600? "600px": "auto" );
- }
第一个 min-width 是正常的; 但第 2 行的 width 使用了 JavaScript, 这只有 IE 才认得, 这也会让你的 HTML 文档不太正规. 它实际上通过 JavaScript 的判断来实现最小宽度.
10: 万能 float 闭合
将以下代码加入 Global CSS 中, 给需要闭合的 div 加上
- <style>
- /* Clear Fix */
- .clearfix:after
- {
- content:".";
- display:block;
- height:0;
- clear:both;
- visibility:hidden;
- }
- *HTML .clearfix{
- height:1%;
- }
- *+HTML .clearfix{
- height:1%;
- }
- .clearfix
- {
- display:inline-block;
- }
- /* Hide from IE Mac */
- .clearfix {display:block;}
- /* End hide from IE Mac */
- /* end of clearfix */
- </style>
- /**********************************************/
- <div id="wrap">
- <div class="column_left">
- <h1>Float left</h1>
- </div>
- <div class="column_right">
- <h1>Float right</h1>
- </div>
- </div>
- #wrap{ border:6px #ccc solid; overflow:auto; _height:1%;}
- .column_left{ float:left; width:20%; padding:10px;}
- .column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}
本文转自: https://www.cnblogs.com/huangjianhuakarl/archive/2009/07/22/1528744.html
更多 CSS 相关知识, 请查阅 HTML 中文网 CSS 文档 https://www.html.cn/book/css/ !!
来源: http://www.css88.com/web/css/16146.html