tml兼容性

于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-left:50px;当加浮动后，在IE6下量，会发现margin的距离变为100px，当然，这个双边距只对浮动的第一个有效，后面的是正常的。

当设置右边的margin-right是没有双边距的

 代码：

css:

 

 

解决办法:针对IE6,IE7添加*display:inline; 样式

 

通过下面的图例可以看出对比：

 

li里元素浮动，在IE6，IE7下产生4px间隙问题

解决办法：

解决后：

浮动元素之间注释，导致多出一些前面的文字，像是被复制了，贴在后面的小尾巴。

IE6,7产生这个Bug的条件：产生两个浮动元素中间有注释或者内联元素并且和父级宽度相差不超过3px

解决办法：

  1. 两个浮动元素中间避免出现内联元素或者注释
  2. 与父级宽度相差3px或以上

 

这里是只是给左边盒子加了浮动，没加内容，右边盒子有浮动，且有内容，宽度==父元素宽度    中间还夹杂着内联元素以及注释

 

bug图

 解决办法上面已经列出来了，就是减小子元素的宽度，或者2个浮动中间不加内联元素或注释。尽量让块级元素处于同一个等级。

 

 

 IE6,IE7父元素的overflow:hidden;包不住设有position:relaive的子元素--既然是说要包住子元素，那子元素肯定的宽高大于父元素，才能撑出去。

 

产生的bug图：

解决办法：针对ie6、7给父级元素添加相对定位--让父元素和子元素处于统一环境下，relative只要不设置top和left值，没啥影响，它还是在最初的位置。

 

 IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差

解决方案：避免父级宽高出现奇数

 IE6下绝对定位元素和浮动元素并列绝对定位元素消失

chrome下：

正常，左边空的那是margin-left:50px;

IE6下：黄色块消失了

bug产生条件：浮动元素和绝对定位元素是同级的话定位元素就会消失。解决方案：所以咱们只要让他们俩不处于同级就可以避免这个bug。-比如在绝对定位的元素外面套一层，以阻断bug条件的产生。

IE6下input的空隙

chrome下：正常情况下，input是不应该有背景的，因为宽度和box一致，box高度是有input控制的。

IE6下：红色是加给box的背景，但是在IE6下竟然能看到，说明有空隙。

解决方案：给input元素添加float -- hack

IE6 下 输入类型表单控件背景问题

在IE6下，当你输入的内容过多，会将图标挤走。

解决方案：设置background-attachement:fixed;但是在chrome下，图标会偏上移动。其实这个Bug可以忽略，可以用其他方法加图标。

什么是BFC模型

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

什么是haslayout？

有哪些方法可以触发haslayout?

 

posted @ 2017-06-17 16:48  星辰之夜  阅读(388)  评论(0)  编辑  收藏  举报