首先推荐一款集成多个版本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
分享到：
相关推荐
浏览器兼容常见问题css兼容 css兼容 浏览器兼容 IE6789兼容
各浏览器CSS hack兼容表各浏览器CSS hack兼容表
以下是一些关于CSS兼容性的关键知识点： 1. **浏览器内核与前缀**： - 不同浏览器使用不同的内核，例如：Chrome和Safari使用WebKit，Firefox使用Gecko，Edge和旧版IE使用Trident。这些内核对CSS新特性的支持程度...
CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页...
本文将总结常见的 CSS 兼容问题和解决方法。 一、CSS 样式的差异 * 字串 8ul 和 ol 的默认 padding 值不同，Firefox 中为 40px，IE 中为 0，解决方法是设置 ul{margin:0;padding:0;} * 字体大小 small 的定义不同...
IE6浏览器兼容问题总结及CSS排版注意地方 列举IE6中10个不得不注意的问题 重构你的代码
总结，"CSS浏览器兼容性速查"是开发者解决问题的关键工具，通过理解和掌握不同浏览器对CSS的支持情况，我们可以编写出既能展示美观设计，又能保证兼容性的代码，从而提升用户体验。这需要不断学习和实践，随着浏览器...
### 如何让CSS在所有浏览器下兼容 在Web开发领域，确保CSS代码能够在不同浏览器上稳定运行是一项重要的技能。本文将详细介绍如何使CSS在各种浏览器（包括但不限于IE6、IE7、IE8以及现代浏览器如Firefox和Chrome）下...
什么是CSS hack： 由于不同的浏览器，对CSS的解析认识不一样，从而导致生成的页面效果不一样，得不到我们所需要的页面效果。... 针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack
#### 二、CSS兼容性的基本概念 1. **浏览器差异**：不同的浏览器内核对于CSS的支持存在差异。例如，Chrome、Firefox等基于WebKit或Gecko内核的浏览器通常支持最新的CSS特性，而一些老旧的IE版本则支持度较差。 2....
【CSS入门教程：IE和Firefox浏览器CSS兼容性技巧】 在网页设计中，CSS（层叠样式表）扮演着至关重要的角色，它使得我们能够控制页面的布局和样式。然而，不同浏览器之间对于CSS的支持程度和解析方式存在差异，尤其...
### 跨浏览器兼容CSS篇：实现一致性的策略与技巧 #### 一、引言 在Web设计领域，确保网站在不同浏览器中呈现一致的效果是一项挑战性任务。由于各种浏览器对CSS的支持程度不尽相同，开发者经常面临布局差异的问题。...
本文旨在总结和分享一系列关于CSS兼容性的技巧，帮助开发者更好地解决在不同浏览器（如IE6-IE9、Firefox、Chrome等）下的样式差异问题。 #### 二、CSS兼容性基础知识 在深入探讨具体的兼容性技巧之前，我们首先...
了解浏览器的兼容性问题是非常重要的，为此，我们总结了一些常见的浏览器兼容性问题的解决方案。 1. 垂直居中问题 垂直居中是CSS布局中常见的问题。解决方案是使用`vertical-align:middle;`将行距增加到和整个DIV...
本文将详细介绍如何编写针对不同浏览器的CSS兼容写法。 首先，我们可以使用特定的CSS选择器来让特定浏览器识别某些样式。例如，对于IE6，我们使用`*html .head{color:#000;}`，其中星号(*)前缀的选择器只有IE6会...
### 区别不同浏览器CSS Hack知识点详解 #### CSS Hack简介 在Web开发过程中，由于不同浏览器对CSS的支持程度不一，导致同一段CSS代码在不同的浏览器中可能呈现出不同的效果。为了确保网页能在各种浏览器中正常显示...
以下是一些常见的CSS浏览器兼容性问题及其解决方案： 1. **垂直居中问题**： 在CSS中，要实现一个div的垂直居中，可以使用`vertical-align: middle;`和`line-height`属性。但这种方法要求内容不换行。例如： ```...
本文主要探讨CSS和JavaScript在IE（Internet Explorer）和其他非IE内核浏览器如Firefox、Chrome、Opera中的兼容性问题。 首先，IE浏览器虽然市场份额较大，但其各个版本（如IE6、IE7、IE8）对CSS和JavaScript的支持...