`

浏览器CSS兼容总结

    博客分类：
  • css
浏览器CSSIEChromewebkit 
阅读更多

首先推荐一款集成多个版本IE(IE5.5、IE6、IE7、IE8)的样式测试工具（IETester）：

http://www.my-debugbar.com/wiki/IETester/HomePage

以下是上个月总结的样式兼容方面的技巧，现发布到博客。

1.        使用 DIV+CSS 布局注意事项：

 

使用 DIV+CSS 布局，要配合一定的 table 布局才能较好的达到多浏览器兼容。

完全使用 DIV+CSS 布局实现多浏览器的兼容，难度较大；

在对样式不熟悉且项目需求中没有要求一定要用 DIV+CSS 布局的情况下，建议直接使用 table 布局，这样更容易实现多浏览器兼容；

 

2.        IE 不同版本之间的兼容， IE 与火狐的兼容：

 

可以使用如下形式 ( 以 IE6 为例 ) ，为特定版本的 IE 使用特定的样式达到 IE 不同版本间的样式兼容

    <!--[if lte IE 6]>

<link href="../../Content/DropdownMenuIE6.css" rel="Stylesheet" type="text/css" />

<![endif]-->

这里的 <!--[if lte IE 6]> 和 <![endif]--> 之间除了可以使用 link 标签引用样式外，还可以用 style 标签声明特定的样式。

 

像 _width ， _height 等在样式属性名前加“ _ ”只有 IE6 才能识别。

在样式属性值之后接“ !important ”（必须写在未加 !important 的同名属性前）， IE6 会忽略， IE7 、 IE8 及 FF 能识别。

在样式属性前加“ * ”则只有 IE 能够识别。

例如：

区别 FF ， IE7 ， IE6 ：

       background: orange ; * background: green   !important ;*background: blue ;

 

 

IE6

IE7

FF

*

√

√

×

!important

×

√

√

#someNode

{

    position: fixed; /* FF 及其他浏览器 */

   #position: fixed; /* IE7 */

   _position: fixed; /*IE6 以及更老的版本*/

}

 

#example { color: #333; } /* FF 及其他浏览器 */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

注意：

*+html 对 IE7 的 HACK 必须保证 HTML 顶部有如下声明：

  以下为引用的内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

 

可以使用以下 HTML ：

< meta http-equiv ="x-ua-compatible" content ="ie=7" />

让 IE8 使用兼容 IE7 的样式模式。

 

当由于使用 margin 、 padding 导致的 IE 与 FF 显示的宽度有差异时，除了可以尝试使用上文提及的方法处理外，还可以使用脚本在相应的部分添加样式，例如：

< script language ="javascript" src ="../../Scripts/jquery-1.3.2.js" type ="text/javascript"></ script >

< script type ="text/javascript" language ="javascript" >

// 火狐浏览器样式

$(document).ready(function (){

    var bro=$.browser;

    if (bro.mozilla) {

       $("#aboutMenu" ).attr("style" ,"padding:0 33px 0 23px;" );

       $("#headTaleFF" ).attr("style" ,"width:951px;" );

    }  

})

</ script >

上面的代码是使用jquery判断当前的浏览器是否是火狐，当是火狐浏览器时，添加相应的样式（覆盖之前产生差异的样式），使得火狐中的显示宽度与IE保持一致。

 

3. 补充一些项目中的样式问题：

 

用hr标签显示一条横线时，在FF中的颜色始终是深黑色（即使写了颜色样式）。

这时可以考虑用DIV实现显示横线，但如果样式中不加overflow : hidden ;则在IE6中横线的高度会有20像素左右，而不是1像素。正确的写法如下：

< div style =" background-color : #b2b5b6 ; width : 179px ; height : 1px ; overflow : hidden ;" />

 

在使用li标签时（例如在导航条中），因为li标签的内容前会有列表符号，所以会空出一部分，如果要消除这部分空余，在li标签的样式里添加 padding : 0px ;margin-left : 0px ;list-style-type : none ;既可。

 

4. 针对webkit的hacks ：

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

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

    }

 

这样的hacks同样是被Google Chrome、Safari 3.0、Opera 9 所识别的。“另有一种通过附加#的Css hack对chrome无效，可能是Webkit版本不同。”

将chrome的字体设置为宋体，其它浏览器仍然使用默认设置的字体：

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

    .parent-cat li {font-family :' 宋体' }

    .parent-cat li {font-family :inhert ;#}

    }

在设置完针对google chrome的样式后，再通过css inhert + # hacks即可达目标。

（针对webkit的hacks来源：http://www.ajaxbbs.net/post/google-chrome-only-css-hacks.html ）

 

转自：http://blog.csdn.net/n_ithero/archive/2009/11/25/4873376.aspx

分享到：
| 二、jquery选择器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics