浏览器CSS兼容总结

最新推荐文章于 2024-04-26 22:14:41 发布

Xuon

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量1.2k

点赞数

分类专栏： CSS 文章标签：浏览器 css ie chrome html safari

本文链接：https://blog.csdn.net/n_ithero/article/details/4873376

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先推荐一款集成多个版本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]>

<![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：

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

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

//火狐浏览器样式

$(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像素。正确的写法如下：

在使用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）

Xuon

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浏览器CSS兼容总结

首先推荐一款集成多个版本IE(IE5.5、IE6、IE7、IE8)的样式测试工具（IETester）：http://www.my-debugbar.com/wiki/IETester/HomePage 以下是上个月总结的样式兼容方面的技巧，现发布到博客。 1. 使用DIV+CSS布局注意事项：使用DIV+CSS布局，要配合一定的table布局才能较
复制链接

扫一扫