ie8:float+h系列标签bug

本来今晚想深入研究浮动,但是却遇到了意想不到的问题,到现在也不明白到底是发现了IE8的BUG,还是自己没有理解到那个层面,因为这是我第一次遇见FLOAT会跟H系列标签冲突。

 

一:遇到的问题和截图

<div id="main" >
 <ul class="idTabs">
  <li><a href="#about">关于</a></li>
  <li><a href="#finishers">详情</a></li>
 </ul>
 <div id="about">
  <h4>11111</h4>
 </div>
 <div id="finishers">
  <h4>22222</h4>
 </div>
</div>

 <style>
body,h1,h2,h3,h4,h5,h6,p,div,ul,li,p{
 margin:0px;
 padding:0px;
}
body{
 background:black;
 color:white;
}
#main{
 color:#111;
 width:500px;
 height:100px;
 margin:0px auto;
 background:white;
 clear:both;
}
#main > ul > li{
 list-style:none;float:left;/*此块为问题代码,加上它之后出现的问题*/
}
</style>

 

二:笨解决方法

*{margin:0px;padding:0px;}/*虽然问题解决了,可是却造成了CSS加载变慢的问题*/

 

三:H引起的问题,蒙了,不明白原理

body,h1,h2,h3,h4,h5,h6,p,div,ul,li,p{
 margin:0px;
 padding:0px;
}

 

 

希望大家一起探讨!解释H系列标签为什么会跟FLOAT:LEFT冲突

 

16-4-10:今天才发现HTML中有H标签,眼瘸了

你可能感兴趣的:(js,ie8,兼容性)