css3样式兼容-css样式与不同浏览器的兼容性

在设计网站时，要注意css样式与不同浏览器的兼容性，尤其是完全使用DIVCSS设计的网站，更要注意IE6IE7FF与CSS样式的兼容性，否则，你的网站可能会很混乱，有不良影响！

所有浏览器通用高度：100px；

IE6专用高度：100px；

IE6专用 *height:100px;

对于IE7*+高度：100px；

IE7和FF共享高度：100px！重要；

1.CSS兼容性

下面两种方法几乎可以解决所有兼容问题。

1,!重要（不是很推荐，下面的感觉最安全）

由于IE7支持!important，所以!important方法仅兼容IE6。 （注意措辞，记住声明的位置需要提前。）

代码：

2、IE6/IE77转火狐

*+html和*html是IE特有的标签，firefox暂时不支持。 而*+html是IE7特有的标签。

代码：

注意：

*+html对IE7的兼容必须保证HTML的底部有如下语句：

代码：

2.通用浮动闭包（非常重要！）可以用来解决多个div对齐宽度不正确的问题。

关于clearfloat的原理请参考【HowToClearFloatsWithoutStructuralMarkup】

在GlobalCSS中添加如下代码，在需要关闭的div中添加class="clearfix"，就可以了。

代码：

3.其他兼容方法（蛮有用的）

1、FF下div设置padding后，宽度和高度会减小，但IE不会。 （可以通过！important解决）

2、居中问题。

1）。 垂直居中。 将line-height设置为与当前div相同的高度，然后传递vetical-align: middle。 （请注意，内容不会换行。）

2）。 水平居中。 保证金：0自动； （其实也不是万能的）

3、如果需要给a标签中的内容添加样式，需要设置display:block； （常见于导航标签）

4、FF和IE对BOX的理解不同导致了2px的差异，设置为float的div在IE下margin增加了一倍。

5、ul标签在FF下默认有list-style和padding。 最好提前申报，以免造成不必要的麻烦。 （常见于导航标签和内容列表）

6.不要将div的高度设置为外部包装器。 最好加上overflow:hidden来实现高度适配。

7.关于手形光标。 光标：指针。 并且hand只适用于IE。 粘贴代码：

兼容代码：与最推荐的模式兼容。

/*FF*/

.提交按钮{

向左飘浮;

宽度：40px；

高度：57 像素；

顶部边距：24px；

右边距：12px；

/*IE6*/

*html。 提交按钮{

顶部边距：21px；

/*IE7*/

*+html.提交按钮{

顶部边距：21px；

哪些浏览器兼容：当我们使用不同的浏览器（FirefoxIE7IE6）访问同一个网站或页面时，会出现一些不兼容的问题，有的显示正常，有的显示不正常，我们在编写CSS时会很沮丧，刚刚修复了一个一个浏览器中的错误只会导致另一浏览器中出现新的错误。 兼容性是一种允许您在一个 CSS 上独立编写支持不同浏览器的样式的方法。 现在和谐了。 呵呵！

谷歌最近发布的IE7浏览器的兼容性确实给一些网页生产者增加了沉重的负担。 尽管IE7已经走向标准化，但与FF还是有很多差异，所以需要兼容IE7。 很多同学问IE7的兼容性是什么，虽然我也不知道。 我还没有找到兼容 IE7 的版本。 不仅是下面的文章，《firefoxie6ie7的css样式》中的兼容性表格也很有用。

有点逻辑思维的人都会知道IE和FF是可以结合使用的。 下面介绍一下三种兼容性，例如：（适合菜鸟，呵呵，高手就路过这里了。）

代码

第一个是兼容的，IEFF是所有浏览器通用的（虽然不兼容）

高度：100px；

第二个仅兼容IE6

_高度：100px；

第三种兼容IE6IE7公版

*高度：100px；

介绍完这三种兼容性之后，我们来看看如何为样式中的某个属性定义IE6IE7FF特有的兼容性，看下面的代码，顺序不能错：

代码

高度：100px；

*高度：120px；

_高度：150px；

我简单解释一下各个浏览器是如何理解这三个属性的：

FF下，第二个和第三个属性FF不知道，所以读取的是height: 100px;

在IE7下，IE7无法识别第三个属性，所以读取了第一和第二个属性，而由于第二个属性覆盖了第一个属性，所以IE7最终读取到了第二个属性 *height:120px ；

在IE6下，IE6识别所有三个属性，因此三个属性都可以读取，并且由于第三个属性覆盖了前两个属性，所以IE6最终读取第三个属性。

1 个适用于 firefoxie6ie7 的 css 样式

如今，它们中的大多数都与 !important 兼容。 对于ie6和firefox测试都可以正常显示，ie7可以正确解释!important，会导致页面不能按要求显示！ 找到一个很好的兼容IE7的形式就是使用“*+html”。 现在用IE7浏览应该没有问题了。 现在你可以编写这样的 CSS：

#1{颜色:#333;}/*莫兹*/

*html#1{颜色:#666;}/*IE6*/

*+html#1{颜色:#999;}/*IE*/

这样字体颜色在firefox下显示为#333，IE6下显示为#666，IE7下显示为#999。

2 css布局中的居中问题

主要样式定义如下：

正文{TEXT-ALIGN:center;}

#center{MARGIN-RIGHT：自动；MARGIN-LEFT：自动；}

阐明：

首先在父元素中定义TEXT-ALIGN:center； 这意味着内容在父元素中居中； IE 已经可以进行此设置。

但不以 mozilla 为中心。 解决方案是添加“MARGIN-RIGHT:auto;MARGIN-LEFT:auto;” 设置子元素定义时

需要注意的是，如果要使用该方法使整个页面居中，建议不要在DIV中设置。 可以按顺序分隔多个div，只要定义MARGIN-RIGHT:auto; 左边距：自动； 会做。

三盒模型有不同的解释。

＃盒子{

宽度：600px；

//forie6.0-width:500px;

//福夫+ie6.0

＃盒子{

宽度：600px！重要

//福夫

宽度：600px；

//福夫+ie6.0

宽度/**/:500px；

//forie6.0-

4 浮动ie形成的双倍距离

#box{float:left;width:100px;margin:000100px;//这种情况下，IE会形成200px的距离 display:inline;//使浮动忽略}

下面详细介绍一下block和inline这两个元素。 Block元素的特点是：总是另起一行，并且高度、长度、列宽、行距都可以控制（块元素）； Inline元素的特点是：和其他元素在同一行上，...不可控（内联元素）；

#box{display:block;//可以模拟为块元素，用于嵌入元素 display:inline;//达到同行排列的疗效

iplay：表；

5IE以及长度和高度的问题

IE不识别min-的定义，但实际上它认为正常的宽度和高度具有min。 这是个大问题。 如果只使用长度和高度，这两个值在普通浏览器中不会改变。 如果只使用min-width和min-height，IE的底部基本等于没有长度和高度。 比如设置背景图片，这个长度就比较重要。 要解决这个问题，您可以这样做：

#box{宽度：80px;高度：35px;}html>body#box{宽度：自动;高度：自动;最小宽度：80px;最小高度：35px;}

最小长度 6 页

min-width 是一个非常方便的 CSS 命令。 它可以指定最小元素不能大于一定的长度css3样式兼容，从而保证排版仍然正确。 但 IE 无法识别这一点，它实际上使用宽度作为最小长度。要使该命令也适用于 IE，请放置一个

将其放在标签下，然后为div分配一个类：

那么CSS的设计是这样的：

＃容器{

最小宽度：600px；

width:表达式(document.body.clientWidth<600? "600px":"auto");

第一个min-width是正常的； 但是第二行的宽度使用了Javascript，只有IE能识别，这也会让你的HTML文档不太正式。 它实际上是通过Javascript的判断来实现最小间距的。

7 消除浮动

.兼容框{

显示：表；

//将对象显示为块元素级表

或者

.兼容框{

明确：两者；

或者添加：after(伪对象)，设置对象后面出现的内容。 它通常与内容结合使用。 IE不支持这个伪对象，IE浏览器也不支持，所以不影响IE/WIN浏览器。同类中最麻烦的

... #box:之后{

内容： ”。”;

显示：块；

高度：0；

明确：两者；

可见性：隐藏；

8DIV 浮动 IE 文本形成 3 像素错误

一侧的对象是浮动的，左侧位于外部补丁的右侧边距处，右侧对象中的文本距左侧的宽度为 3px。

＃盒子{

向左飘浮;

宽度：800px；}

＃左边{

向左飘浮;

宽度：50%；}

＃正确的{

宽度：50%；

*html#左{

右边距：-3px；

//这句话是关键

HTML代码

9 属性选择器（这个不兼容，是隐藏css的bug）

p[id]{}div[id]{}

p[id]{}div[id]{}

IE6.0及以下版本、FF、OPera功能隐藏

属性选择器和子选择器之间还是有区别的。 子选择器的范围在方法上比较窄，而属性选择器的范围比较大。 例如，在p[id]中，所有带有ids的p标签都是相同的样式。

10 IE捉迷藏问题

当div的应用比较复杂时，每一列都有一些链接，DIV等就容易出现捉迷藏的问题。

部分内容无法显示。 当鼠标选中该区域时，发现内容确实在页面上。

解决方案：为#layout使用line-height属性，或者为#layout使用固定的高度和宽度。 保持页面结构尽可能简单。

11 身高不适

高度不兼容是指当外层对象的高度发生变化时，无法手动调整内层的高度，尤其是使用外层对象时

当 margin 或 paddign 时。 例子：

p 对象的内容

CSS：

#box{背景颜色:#eee;}

#boxp{上边距：20px;下边距：20px;文本对齐：中心;}

解决方案：在P对象的上方和下方添加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}，或者为DIV添加border属性。

屏蔽IE浏览器（即IE下不显示）

*:lang(zh)select{font:12px!important;}/*FF，OP可以看到*/

select:empty{font:12px!important;}/*safari 可见*/

这里select是一个选择器，根据情况进行替换。 第二句是MAC上safari浏览器特有的。

仅IE7识别

*+html{…}

当需要为 IE7 制作样式时，可以使用这种兼容性。

IE6及以下IE6识别

*html{...}

这个地方要非常小心，很多楼主都写了兼容IE6，虽然IE5.x也能识别这个兼容。 其他浏览器无法识别它。

html/**/>bodyselect{...}

这句话和上一句的作用是一样的。

只有IE6不识别

select{显示/*IE6无法识别*/:none;}

这里主要是通过CSS注释来分隔一个属性和值，注释在引号之前进行解释。

只有IE6和IE5不识别

select/**/{显示/*IE6、IE5无法识别*/:none;}

这里与上一句的区别在于选择器和花括号之间有一个额外的 CSS 注释。

只有IE5不识别

select/*IE5无法识别*/{display:none;}

这句话去掉了上一句属性区的注释。只有IE5不识别

盒模型解决方案

selct{width:IE5.x 长度;voice-family:""}"";voice-family:继承;width:正确的长度;}

盒模型清理不是通过 !important 处理的。 这应该是清楚的。

删除浮动

选择：之后{内容：“。”；显示：块；高度：0；清除：两者；可见性：隐藏；}

在Firefox中，当children全部浮动时，parent的高度无法完全覆盖整个child，所以这时候利用这个兼容性消除浮动来定义一次parent，这样就可以解决这个问题了。

截断省略号

选择{-o-text-overflow：省略号；文本溢出：省略号；空白：nowrapoverflow：隐藏；}

这是一个非常好的技术，可以在超过厚度后自动剪掉多余的文本并以省略号结束。 只是目前火狐浏览器还不支持。

仅 Opera 认可

@mediaalland(最小宽度:0px){选择{...}}

对 Opera 浏览器进行单独设置。

以上是写CSS时的一些兼容性。 建议遵循正确的标签嵌套（divulli嵌套结构关系），这样可以减少你使用兼容性的频率，并且不要陷入误区。 不是一个页面需要很大的兼容性（以保持多浏览器兼容性），很多情况下，浏览器不需要任何兼容性就可以很好地工作。 这用于解决部分兼容性问题。 如果您想分离兼容性内容，请尝试以下一些过滤器。 这些过滤器有的用CSS编写，通过过滤器导出特殊样式，有的用HTML编写，通过条件链接或导出必要的补丁样式。

IE5.x过滤器，仅IE5.x可见

@mediatty{

我{内容："";/*""*/}}@import'ie5win.css';/*";}

}/**/

IE5/MAC过滤器，通常不需要

/**//*/

@导入“ie5mac.css”；

/**/

以下是IE的条件注释。 我个人认为使用条件注释来调用相应的兼容是多浏览器兼容的完美解决方案。 将需要兼容的部分放在单独的文件中，当浏览器版本匹配时，就可以调用兼容的样式。 这样不仅使用起来非常方便，而且对于CSS本身的制作也可以更加严格。 观察是否有必要使用兼容性，很多时候，我自己写CSS的时候，如果我把所有的代码，包括兼容性，都放到一个CSS文件里，那就很随意了，想怎么兼容就怎么兼容，而你独立写作的时候，你会不自觉地考虑是否有必要兼容。 首先兼容CSS吗？ 还是先调整主CSS上的东西尽可能兼容？ 当你只用一点点兼容性就让很多浏览器乖乖听话的时候，你不觉得很有成就感吗？你知道如何选择吗~~呵呵

IE的if条件与其自身兼容，可以灵活使用。 请参阅此 IE 条件注释

唯IE

所有IE都认可

只有IE5.0可以识别

仅限IE5.0+

IE5.0和IE5.5均可识别

仅IE6识别

仅IE7/-

IE6和IE6以下的IE5.x都可以识别

仅IE7/-

仅IE7识别

如果CSS中有很多不遵循个别规则的东西，会让你很苦恼。 即使你可以通过很多兼容性来控制它css3样式兼容，很多！重要的，你会发现从长远来看你会很不甘心，看看很多优秀的网站，他们的CSS使IE6，Ie7，Firefox，甚至Safari、Opera运行完美，是不是很令人羡慕？ 而且他们看似复杂的模板使用的兼容性很少。 虽然你要知道IE和Firefox并不是那么不和谐，但我们已经找到了一些技巧可以让它们和谐共存。 不要以为一旦找到兼容的解决方案，一切就都在掌控之中。 我们不是兼容的奴隶。

divulli 的嵌套顺序

明天只有一条规则，那就是