HTML`CSS |解决网站页面上不同浏览器的兼容性问题|菲比·月亮|博客园

目前，有五种最受欢迎​​的浏览器: 即Edge浏览器（属于Microsoft），Firefox，Google（chrome）Safari和Opera五种浏览器.

三核: IE，360，猎豹，百度；

Gecko内核: Firefox ----------->此浏览器内核是一个开放源代码浏览器内核，有许多插件，-------------- >缺点: 打开速度慢（加载Flash插件）<-----额外介绍----->.

Presto核心: Opera7及更高版本

Webkit: Travel，Apple，symbian； Safari，Chrome

Bink: Chrome（28版及更高版本），Opera（15版及更高版本）和Yandex浏览器，大多数家用浏览器的最新版本都使用Blink；

对于浏览器兼容性问题，通常是HTMLweb浏览器兼容问题，Javascript兼容，CSS兼容. 其中，与html相关的问题相对容易处理. 无非是这样的事实，高级浏览器使用的元素不能被低级浏览器识别，从而导致它们无法解析.

方法是: 每次我们编写一小段代码（布局中一行或一行）时，我们都必须查看它是否在不同的浏览器中兼容. 当然，熟练到一定程度并不那么麻烦. 建议经常遇到兼容性问题的新手使用. 许多兼容性问题是由浏览器对标记的默认属性的不同解释引起的. 只要稍加设置，就可以轻松解决这些兼容性问题. 如果我们熟悉标签的默认属性，那么我们将了解为什么会出现兼容性问题以及如何解决这些兼容性问题.

使用黑客，我可以将浏览器分为3类: ie6; ie7和漫游；其他（例如chrome ff safari歌剧等）

例如，这样的CSS设置高度: 300像素； *高度: 200像素； _height: 100像素；当浏览器读取高度时web浏览器兼容问题，ie6浏览器会认为高度为300px，高度为300px. 继续阅读，他也知道* heihgt，因此当ie6读取* height: 200px时，它将覆盖前一个的冲突设置，并认为高度为200px. 继续阅读，ie6也会识别_height，因此他将覆盖200px高的设置并将高度设置为100px； ie7和敖友也从300px的高度读取了相同的设置. 当他们读取* height200px时，他们停止了，因为他们不识别_height. 因此，他们会将高度解析为200px；其余浏览器仅识别第一个高度: 300像素；因此他们会将高度解析为300px.

由于相同优先级的设置和冲突的属性将覆盖前一个，因此写入顺序非常重要.

/* CSS属性级Hack */ 
color:red; /* 所有浏览器可识别*/
_color:red; /* 仅IE6 识别 */
*color:red; /* IE6、IE7 识别 */
+color:red; /* IE6、IE7 识别 */
*+color:red; /* IE6、IE7 识别 */
[color:red; /* IE6、IE7 识别 */ 
color:red\9; /* IE6、IE7、IE8、IE9 识别 */
color:red\0; /* IE8、IE9 识别*/
color:red\9\0; /* 仅IE9识别 */
color:red \0; /* 仅IE9识别 */
color:red!important; /* IE6 不识别!important 有危险*/
/* CSS选择符级Hack */ 
*html #demo { color:red;} /* 仅IE6 识别 */
*+html #demo { color:red;} /* 仅IE7 识别 */
body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 
*/ 
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */
:root #demo { color:red\9; } : /* 仅IE9识别 */

浮动越少，代码就会越少，页面越灵活，页面越可扩展. 不用多说，它可以归结为一定的水平，并且浮动将减少使用. 此外，您还将避免使用浮点+边距. 因此，以后遇到此错误的难度更大.

注意是一种技巧，而不是一种方法: 写一个标准的页眉;>;>尽可能多地使用填充，谨慎使用边距，尽可能多地填充100％，父级高度具有固定值，并且子级高度不必为100％，所有子级都为浮动状态时，请在底部填充空白: 两个div宽度均应尽可能使用边距，请谨慎使用填充，宽度的计算方法是实际减去填充<

display:block,inline两个元素
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
display:table; //for FF,模拟table的效果

display: block块元素，该元素的特征是: 总是从新行开始；高度，线条高度以及顶部和底部边距都可以控制；宽度默认为其容器的100％，除非设置为“一个宽度”

display: inline是将元素显示为inline元素，该元素的特征是: 其他元素在一行上；高度，线条高度以及上下边距不能更改； width是其文本或图片的宽度，不可更改. span，a，label，input，img，strong和em是内联元素的示例

1）

<style type="text/css">
<!-- div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red; } -->
</style>

2）div中的内容，IE默认为居中，FF默认为左对齐，您可以尝试增加代码余量: 0自动；

①例如:

.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}

<div id=”page”>
<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>
</div>

<div id=”page”>
<div id=”bg” style=”float:left;width:100%”>
<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>
</div>
</div>

/* Clear Fix */ 
.clearfix:after { content:"."; display:block; height:0; clear:both;visibility:hidden; } 
.clearfix { display:inline-block; } 
/* Hide from IE Mac */ 
.clearfix {display:block;} 
/* End hide from IE Mac */ 
/* end of clearfix */