CSS hack技术解决浏览器兼容性问题

来源：互联网发布：淘宝客优惠券软件下载编辑：程序博客网时间：2024/05/17 04:16

CSS Hack浏览器兼容性对照表

什么是CSS Hack？

这要从各种浏览器对网页标准CSS的解析方法来说起，不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程，就叫CSS Hack。

CSS Hack的原理是什么？

CSS Hack的原理只有两条：兼容性和顺序。就是利用书写顺序和不同浏览器对一些特定书写方法的解析方式不同而达到不同的效果。

举个例子，利用书写顺序区分IE和Firefox字体颜色：

<style>

p { background:blue; 　　

* background:red; /* for IE */ }

</style>

上面这段代码利用在属性前加星号“*”达到让IE浏览器识别background:red;这句属性，而利用先写全局属性再写针对IE的属性达到区分IE浏览器的效果，CSS的原理和大概用法就是这样，难度就在于对各个CSS Hack的掌握和熟练运用，因为CSS Hack技术的确十分混乱，下面我在详细介绍一些比较常用、易用的CSS Hack。

按浏览器往下延伸的区别方法：

color:brown !important; /*用于IE7、Opera、Firefox2、Firefox3等现代浏览器*/

>color:green !important; /*IE7、IE8可以识别该规则，因此它覆盖掉了上一条规则*/

color:red; /*所有浏览器都可以识别，但是以上两条规则有!important，所以这条规则被忽视；只有IE6认识并覆盖掉上两条规则*/

此外：

*color {color:brown;}/*支持ie6及更新版本浏览器*/

_color {color:red;}/*仅支持ie6*/

*+html #_color {color:green;}/*仅支持 IE7 */

另外，针对一些特殊的浏览器还有一些比较常用的CSS Hack：

只有Opera识别：

@media all and (min-width: 0px){ select {……} }

针对Chrome和Safari等weblit浏览器：

@media screen and (-webkit-min-device-pixel-ratio:0) {

/ * 针对Google Chrome、Safari 3.0、Opera 9 的CSS样式 * /

}

国外很多作者对浏览器兼容性及CSS Hack进行了总结，如上图中所示。左侧代表CSS Hack书写方式，右侧顶部是操作系统和浏览器版本，Y代表支持，N代表不支持。

比如body>div，IE4-IE6的版本都不支持该写法，而IE7和Firefox、Opera的所有版本都支持，所以在书写以下代码时，IE4-IE6版本的浏览器对字体显示是红色的，而IE7以上版本及Firefox、Opera浏览器都显示黑色字体。

div {color:red;}

body>div {color:black;}

----------------------------------------------------------------------------------------------------------------------------------

2011-04-27 16:38

本人总结的CSS hack及页面问题常见解决方案(随时更新)

转载于http://hi.baidu.com/rhllingling/item/790b75f46debbe1fce9f32f4

问题一：(IE6下有默认高行)
ie6 7是存在这个bug的，解决方法就是*display:inline-block;或*zoom:1

border:1px solid #000; border-width:1px 0; 左右两边/上下两边代码简写；

问题二：两端对齐：text-align:justify;
text-justify:inter-ideograph;

问题三：背景音乐
方法一:
<embed src="bjyy.mp3" loop="false" width="0" height="0" type=application/x-shockwave-flash
quality="high"></embed>

方法二:
<bgsound src="bjyy.mp3" loop="-1">

问题四：透明度

selector {
filter: alpha(opacity=60); /* MSIE/PC */
-moz-opacity: 0.6; /* Mozilla 1.6 and older */
opacity: 0.6;
}

问题五：CSS Sprites(CSS图片合并技术)

CSS Sprites主要就是提高网页载入速度和防止图片加载延迟

问题六：/*图片公共容器中-居中*/

.demo2 { width:180px; height:180px; display:table-cell; vertical-align:middle; *font-size:160px; border:1px solid #ddd; text-align:center;}
.demo2 img { vertical-align:middle;}

问题七：/*IE6 FF光标手形的兼容问题*/

.pointer{cursor:pointer; _cursor:hand;}

问题八：清除浮动效果：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    .wrap {
   width: 300px;
   border: 2px solid red;
}
.wrap div {
   background: red;
float: left
}

.wrap .fr {
background: green;
float: right;
}
.clearfix:before,
.clearfix:after {
     content:"";
     display:table;
}
.clearfix:after {
     clear:both;
}
.clearfix {
     zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
</style>
</head>
<body>
<div class="wrap clearfix">
  <div class="fl">float left</div>
  <div class="fr">float right</div>
</div>
</body>
</html>

/*具体方法为*/

.clearfix:before,
.clearfix:after {
content:"";
display:table;

}
.clearfix:after {
clear:both;
}
.clearfix {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

问题九：在IE FF CHR op 都可以透明.... iframe

问题十：#滚动条置于底部#

在默认情况下，页面加载完后默认滚动在最顶端，有些时候我们需要在页面打开后，定位滚动条的位置，比如，横向和纵向滚动条居中，实现页面滚动的方法有三种：scroll、scrollBy和 scrollTo，三个方法都带两个参数：x(X轴上的偏移量)和y(Y轴上的偏移量)。因此我们只需修改x,y的偏移量来设置滚动条的位置。另外，页面的滚动高度必须在网页加载完成后才能获取到，所以触发事件用onload。
首先我们将滚动条滚动到页面的最底端：
方法一：用scroll方法实现滚动条位于最底端。

<body onload="scroll(0,document.body.scrollHeight) ">
<script>
document.write(new Array(100).join(" <br>"))
</script>

方法二：用scrollBy方法实现滚动条位于最右端。

<body onload="scrollBy(document.body.scrollWidth，0) ">
<script>
document.write(new Array(100).join(" <br>"))
</script>

方法三：用scrollTo方法实现水平滚动条和纵向滚动条均居中。

<body onload="scrollTo(document.body.scrollWidth/2,document.body.scrollHeight/2)">
<script>
document.write(new Array(100).join(" <br>"))
</script>

虽然使用scroll、scrollBy和scrollTo方法的效果一样，但是彼此之间还是有一些区别的。

问题十一：IE6、IE7、Firefox之间的兼容写法：

写法一：

    IE都能识别*;标准浏览器(如FF)不能识别*；
    IE6能识别*，但不能识别 !important,
    IE7能识别*，也能识别!important;
    FF不能识别*，但能识别!important;
    根据上述表达，同一类/ID下的CSS 　hack可写为：
    .searchInput {
    background-color:#333;/*三者皆可*/
    *background-color:#666　!important; /*仅IE7*/
    *background-color:#999; /*仅IE6及IE6以下*/
    }
    一般三者的书写顺序为：FF、IE7、IE6.

写法二：

    IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写：
    .searchInput {
    background-color:#333;/*通用*/
    _background-color:#666;/*仅IE6可识别*/
    }

写法三：

    *+html 与 *html 是IE特有的标签, Firefox 暂不支持。
    .searchInput {background-color:#333;}
    *html .searchInput {background-color:#666;}/*仅IE6*/
    *+html .searchInput {background-color:#555;}/*仅IE7*/

屏蔽IE浏览器：

select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

*:lang(zh) select {font:12px !important;} /*FF的专用*/
select:empty {font:12px !important;} /*safari可见*/

IE6可识别：

这里主要是通过CSS注释分开一个属性与值，注释在冒号前。

select { display /*IE6不识别*/:none;}

问题十二：png的图片在ie6下怎么才能正常显示呢

png24位的话就用滤镜了

其它的png图片可以做成8位的这样就可以兼容IE6了

IE6下PNG背景透明的显示问题

PNG格式比起GIF来表现色彩更丰富，特别是表现渐变以及背景透明的渐变要比GIF格式出色很多，目前，最新的浏览器基本上都支持PNG格式。但是IE6不支持PNG背景透明，会显示一个灰色的框。

一。IE6下PNG背景透明的解决办法
.pngImg { background:url(image.png); _background:url(image.gif);}
注意上文的_号，目前IE7,8以及Firefox浏览器等都不支持此CSS语法，只有IE6识别。因此，其他浏览器会调用PNG，而IE6刚调用GIF。

二.滤镜filter解决IE6下背景灰

background:url(a.png) repeat-x 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="a.png" ,sizingMethod="crop");
上面的原理是其他调用PNG，IE6,则先设背景没有，然后调用滤镜使之显示PNG图片。

缺陷：IE6下背景无法平铺，这个问题很严重。同时在性能上也有小问题，页面中次数不是很多的时候该办法还是可行的。

AlphaImageLoader滤镜会导致该区域的链接和按钮无效，解决的办法是为链接或按钮添加：position: relative;这样条代码，使其相对浮动。AlphaImageLoader无法设置背景的重复，所以对图片的切图精度会有很高的精确度要求。

解决IE下的链接无效可用最后面的方法：

三.利用JS解决html中的img(插入在网页中的png图像)png背景灰问题

页面中插入一段js即可。原理同上，只是将img标签用<span>标签替换掉，并且通过滤镜设置该<span>标签的background。它会将所有插入的PNG都如此处理。

四.调用iepngfix.htc解决IE6PNG背景灰及拉伸问题（不推荐使用，暂用太多内存，机器很慢，）

以下片段添加至css文件

<div class="pngImg">PNG背景图片</div> <img src="png图片" class="pngImg" alt="">
详细的应用方法这里就不介绍啦。

在逼不得已且身不由己必须使用PNG的情况下，这种方法应该是比较优秀的，虽然不能完美的解决IE6的平铺，但是至少是实现了拉伸，使得很多情况下可以代替平铺来使用。当然效率的问题任然是存在

五.DD_belatedPNG,解决IE6不支持PNG绝佳方案（强烈推荐）

整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与 background-repeat.

而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及<img>.

使用方法
步骤1.在这里下载DD_belatedPNG.js文件.

http://www.35ui.cn/js/DD_belatedPNG.js

步骤2.在网页中引用,如下:

步骤3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名.
使用a:hover请留意
:如果要用透明PNG作为a:hover时的背景图片,,需要以”a:hover”来作为选择器. 否则可能会导致无法成功.同时我也更新了demo,请需要的更新查看.接着我们看看正确的代码:

问题十三：针对不同宽度浏览器实现不同的布局，只要在web页面头部放入类似下面的代码:

问题十四： a点击边线问题

a { blr:expression(this.onFocus=this.blur()) } 针对 IE
a { outline:none; }针对火狐

问题十五：推荐的CSS 书写顺序：

//显示属性
display
list-style
position
float
clear
//自身属性
width
height
margin
padding
border
background
//文本属性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content

问题十六：图片位于div中间，，图片位于屏幕中间

决定对居中

<style>

.div_1{
position:relative;
border: solid 1px red;
width:200px;
height:200px;
background-color:silver;
}
.content {
position:absolute;
top:50%;
left:50%;
width:50px;
height:50px;
margin-top:-25px;
margin-left:-25px;
border:1px solid green;
}

</style>

这是在层的绝对居中，至于页面居中，把那个div删掉就是

问题十七：整站禁止右键复制、粘贴：

问题十八：input 下的disabled在Ie不变色；

IE的disabled 是不能变色的
disabled属性用了就不能变色解决方法;要用readonly来代替