html兼容性2

于IE6下，不能识别我们的h5标签，解决办法

• 主动使用js创建header,footer等标签。--存在的问题，这种方法创建的元素，对于IE6来说，相当于自定义标签，而自定义标签属于 默认属于行内元素 ，所以，我们要在css样式里面给对应的标签加上display:block;
• 还有一个js插件，它主动的帮我们做完了那种h5标签初始化的操作，所以完全不用担心标签兼容性问题，你只需要引入到页面就可以 html5shiv.js

块级元素和内联元素的嵌套规则：

•  p、h1-h6、td、caption、dt这些标签只能放 __内联元素__--坚决不要放块级元素> * 块级元素与块级元素并列、内嵌元素与内嵌元素并列
•  在HTML里有几个元素是比较特别的：
• ul、ol、dl、table，它们的子一层必须是指定元素，ul、ol的子一级必须是li；
• dl的子一级必须是dt或者dd；
• table的子一层必须是caption>或thead、tfoot、tbody等，而再子一层必须是tr （tr只存在于thead、tfoot、tbody中），之后才是可放内容的td或者th。　　
  • a标签不能包含其他a标签
  • pre标签不能包含img,object,big,samll,sub和sup标签
  • button标签不能包 含input,select,textarea,label,button,form,fieldset,iframe 和isindex标签
  •  label标签不能包含其他label标签
  • form标签不能包含其他form标签

magin兼容性问题

当我们按照下面的写法，会存在的问题：

存在的问题的截图：

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
</div>

 对应的css

.box{
    background-color: green;

}
.item{
    height: 50px;
    background-color: red;
    margin: 50px;
}

1. margin-top传递--解决办法：触发BFC、haslayout
2. 上下margin叠压--坍塌--解决办法：尽量使用同一方向的margin，比如都设置top或者bottom

　　如下面的代码：

 解决后的截图：

display:inline-block;在IE7及以下无效

 代码：

在chrome下的样子

对，这是我们想要的效果。IE7以下，都还是竖着排列，因为div是块级元素

IE7以下的效果：

inline-block它是css2.1的标准，不兼容IE7以下。

解决办法：加hack以及触发haslayout

IE以下还把元素之间的空隙去掉了。IE8及以上还有chrome还是有间隙的。

 IE6最小高度问题（它是19px）：加*overflow:hidden;

 就正常了。

 IE6双边距问题：当元素浮动后，再给元素设置margin,就会产生双倍边距。比如：你设置的margin:50px;当加浮动后，在IE6下量，会发现margin的距离变为100px

 代码：

css:

什么是BFC模型

有哪些方法可以触发BFC模型

什么是haslayout？

有哪些方法可以触发haslayout?

原文：http://www.cnblogs.com/xiaqilin/p/7040664.html