分享跨计算机浏览器CSS风格bug调节方法

首先要做的是选择一个好的浏览器。由于他有丰富的调试工具，我们的选择是Chrome。在Chrome上完成调整后，我可以在Safari或firefox上进行调整。

如果在这个“更好”的计算机浏览器上没有达到预期的实际效果，编码本身很可能违反了CSS标准。不要轻易使用hack来处理各种“更好”计算机浏览器中遇到的问题，而是要找出问题的原因。一般来说，我可以检查以下可能的BUG来源：

HTML代码解释 - 你忘了关掉一个标志吗？ 你是否用inline原素包裹block原素？ 在不同的浏览器中，违反规范代码可能会表现出意想不到的效果。

应用CSS 检查Lint专用工具的CSS编码。注意这些Errors。在大多数情况下，Errors比Warnings更容易造成跨计算机浏览器差异。

忘记使用reset页面布局，而是依靠(不同类型)浏览器默认的CSS风格。

浏览器支持的差异。您是否使用了高端CSS3特性或HTML5原素？查询浏览器支持性文本文档，以确保您的所有观众浏览器都已包含。您需要设计“功能降权”来支持旧浏览器。例如，将阴影边框降权为外框，或将圆弧降权为格子。

在不应该有空格符的区域添加空格符，所以margin可能会显得奇怪。

采用相对定位，但未设置垂直和能力偏位。在这种情况下，应在position中显示相对定位元素:与static相同的位置。但是，如果你试图改变它的top，right，bottom或left值，该元素将立即“跳跃”到参考其近期相对定位的父元素位置。

不同display方法元素以“不寻常”的形式组合。比如W3C规范并没有说一个table-cell相邻的浮动元素应该是什么样的layout。因此，这样写编码并非不正确，但可能会导致跨计算机浏览器显示不同效果的BUG。

空格符是否影响layout。你不应该依赖空格符来排版风格。

小数位图像像素也会导致跨浏览器不同的实际效果。

下面的文章正文来了

最重要的是要记住，W3C规范并没有定义不良行为。因此，如果你不按照规范写作，可能会导致跨计算机浏览器的实际效果不同；如果你形成了“奇怪”的特征（如margin和inline） element），这也可能导致跨计算机浏览器不同的实际效果bug。

Display

我觉得写CSS就像选择一段旅程。我们需要做出一些决定。例如，如果您想首先选择使用不同的display方法元素：block，inline，inline-block和table。当您选择时，您可以使用一些特定的方法来改变特定的显示。

margin必须使用块元素，padding，height和width。但是line-height不合适。必须使用line元素-height，vertical align和空字符。但是margin，padding，height和width不合适。首先，该报告采用垂直和水平排列方法。其次，如果你错过了表中的一个原素，所有的报告都可能有奇怪的表现。最后，margin不适合与表格的行和列，padding不适合与报表和表格的行。

Positioning

您可以选择应用块级元素，以下应选择position方法：

Float - 如果使用float，这个元素就会变成块级元素，之前应用于vertical-align和这个元素line-height特性也将无效。

Absolute - 与最近相对定位的父节点相比，计算偏移。当父节点和兄弟节点发生变化时，相对定位元素不会导致reflow。这一特点有利于制作动画的实际效果。但是，如果使用相对定位和发展趋势变化的具体内容，可能会导致难题，一个典型的是相对定位的弧框。

Static – position方法默认。Fixed - 与浏览器窗口相比，元素位置。不常用的方法。

Relative – 它通常不会影响原素的风格。与连接点相比，主管相对定位的子节点将计算偏位。

这里我不例举所有display和position的组合。总之，有两件事需要注意：

对于我选择的display和position方法，其他特点(如margin，line-height）是否合适？position方法是否适合兄弟节点？

例如，float，table-cell和行内元素组合在一起合适吗？计算机浏览器将如何解释3D渲染？W3C规范中有没有定义？如果没有，可能会有跨电脑浏览器bug的风险。自然，这种搭配并非不可能，但你应该弄清楚为什么要这样做，并做好足够的跨计算机浏览器检测。

Internet Explorer

如果你克服了在“更好”计算机浏览器上遇到的问题，你现在应该开始IE服务平台。我建议你逐渐从我期待的最旧版本的IE开始，因为大多数旧版本的IE问题在新版本中继续发生。即使是IE，你也应该试着找出原因，而不是依赖于应用hack。盲目使用*和_的hack模式就像在回到错误值的函数中添加调整量(如下所示)，而不是发现算法不正确。

return result   4;

自然，有时在IE6和IE7中使用hack是非常必要的。对于IE8，hack通常只用于必须适应CSS3的地方。一般来说，hack需要在IE6/7中使用：

haslayout难题应用zoom:1

相对定位导致原素消退

3px波动BUG

被支撑的容器浮动不正确，但经常被overflow:hidden碰巧被掩盖了。还有一些不太常见的现象需要使用hack。例如，当两个浮动元素中间编码comment时，会触发重复内容bug。对于只能在IE中存在的css问题，我建议你仔细描述你能看到的，并在谷歌中找到相应的解决方案。在你寻找bug之前，不要盲目地用hack来掩盖它。IE的调试工具很差，所以也许你应该改进背景颜色，以方便你查询页面中的真实排版设计。

完成解决方案

如果你寻找bug的主要原因并知道解决方案，你也应该知道如何在修改代码时不破坏现有的正常实际效果代码。以下是我们的建议：

1. 依赖风格级联
2. 特定浏览器的应用作前缀
3. IE6/7的*和_应用
4. 尽量不要用IE89
5. 知道什么时候该放弃IE的hack
6. 最新版本的Firefox，Chrome，任何hackkkari添加任何Safari

1. 依赖风格级联

首先，在所有可能的情况下，我们必须使用风格级联。电脑浏览器总是采用他们能理解的最终声明的风格。计算机浏览器总是使用他们可以理解的最终声明的风格。因此，你应该逐渐写下旧版本的浏览器风格，这样计算机浏览器就可以理解和使用这些可以理解的最终风格。比如：

.foo{
background-color: #ccc; /* older browsers will use this */
background-color: rgba(0,0,0,0.2); /* browsers that understand rgba will use this */
}

2. 特定浏览器的应用作前缀

特定浏览器的应用作前缀，尤其是对于还没被广泛采用的特性可用。比如：

.foo{
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%，#1e5799)， color-stop(50%，#2989d8)， color-stop(51%，#207cca) color-stop(100%，#7db9e8); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca #7db9e851% 100%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 #207caca50% 51%,#7db9e8 100%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 #207caca50% 51%,#7db9e8 100%); /* IE10  */
background: linear-gradient(top, #1e5799 0%,#2989d8 #207caca50% #7db9e851% 100%); /* W3C */
}

留意，不同版本的webkit有两种词法。作为前缀编码顺序，应逐步从旧版本的计算机浏览器中编写(参考第一条)。作为前缀编码顺序，应逐步从旧版本的计算机浏览器中编写(参考第一条)。
如果有W3C标准定义的词法，你应该把它放在最后(比如上面最后一行的编码)。因此，随着计算机浏览器逐渐适用于这一新功能的要求词法，您的编码也可以稳定主要性能。

3. IE6/7的*和_应用

用*和_来弥补旧IE独特的bug。例如：

.clearfix {
overflow: hidden; /* new formatting context in better browsers */
*overflow: visible; /* protect IE7 and older from the overflow property */
*zoom: 1; /* give IE hasLayout, a new formatting context equivalent */
}

全部的IE hack适用于某个版本号和以前的主流浏览器，例如：

_ IE6和早期版本号
* IE7和早期版本号
9 IE8和早期版本号 （请注意，IE9在某些CSS属性方面对这些hack非常敏感）。因此，hack代码的顺序也应该从旧版本的计算机浏览器中逐步编写（参考第一条）。

4. 尽量不要用IE89

我从来没有用9来解决IE8中的风格bug。

4. 尽量不要用IE89

我从来没有用9来解决IE8中的风格bug。我只会用9来填补浏览器支持，做“降权”解决方案。例如，我使用box-shadow(在更完美的电脑浏览器上是正常的)，但是在IE8下很难看，所以我用了9来添加一个新的border。这种事情不能依靠风格级联（参考第一条）来处理，因为它是为了增加一种新的风格，而不是改变现有的风格。

5. 知道什么时候该放弃IE的hack

没有必要试图在IE中获得同样的实际效果。您是否愿意消耗额外的HTTP要求，繁琐的HTML/JS为了达到/CSS字符串的常量圆弧框的实际效果也在IE6-8中看到？就我个人而言，我的回答是“不容易”。你应该知道什么时候放弃功能性hack。例如，尽量不要用filter模拟CSS3中的渐变效果，这也会导致兼容性问题和排版设计bug。最简单的方法是，没有必要希望你的网页在主流浏览器中表现得一模一样。针对IE 对于6-8的消费者来说，最好的办法就是给他们一个简单的使用体验(注意，简单而不是不完整)。

以下尴尬的编码是使用filter模拟CSS3中的gradientter：

.foo { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr=#7db9e8，GradientType=0 ); /* IE6-9 */ }

6. 最新版本的Firefox，Chrome，任何hackkkari添加任何Safari