IE6常见兼容性问题-2

2017-06-30  本文已影响0人  王饱饱

Ba la la la ~ 读者朋友,你们好啊,又到了冷锋时间,话不多说,发车!


13.子选择器在IE6中不能使用

产生条件:
IE6浏览器,使用E>F子选择器;

解决办法:采用其他选择器或者采用后代选择器进行控制,如:

14.不支持最大最小宽高

产生条件:
IE6浏览器,标签的最低高度/宽度设置(min/max-height)

解决办法为
IE6单独设置hack,即_height:最小高度值;_width:最小宽度值(对于IE6,当实际宽高超出定义的宽高时,元素会自动调整 宽高)。对于最大高度和最大宽度,没有必要设置兼容,当前对于开发者来说,只需要保证IE6下正常显示即可,无需在它身上花费太多功夫。

15.纵向居中,IE6不支持display:table-cell

产生条件:
IE6浏览器,设置一个元素在另一个元素中垂直方向上居中对齐,不能够支持以单元格的方式来显示元素;

解决办法:
如果是单行文本,采用
line-height和height的配合使得文本垂直居中,如果中间是其他元素或者多行文本,采用其他方法进行居中处理,处理方法有多种,详见日志:CSS元素水平垂直居中

16.input 聚焦框颜色与样式不同

产生条件:各个浏览器表现不同;

处理方法:
使用outline:none,清除默认样式之后再统一设置。

17.鼠标移上小手效果

产生条件:
IE6,cursor:hand :IE完全支持。但是在firefox是不支持的,没有效果。cursor:pointer :是CSS2.0的标准。所以firefox是支持的,但是IE5.0既之前版本不支持。IE6开始支持。;

解决办法:设置两种
cursor:pointer ; cursor:hand。

18.子标签无法撑开父标签的高度

产生条件:父标签内部含一个或多个子标签,父标签没有设置浮动,而子标签发生浮动;

处理方法:方法
1:在子标签最后添加清除浮动的设置<div style='height:0;clear:both'></div>;方法
2:为父标签添加{overflow:hidden;}的样式;方法
3:为父标签设置固定高度。

19.li的间距问题

产生条件:
IE6浏览器 li标签设置宽高,且li里面的元素发生了浮动;

处理方法:

方法1:li不设置宽高;

方法2:li内部的标签不进行浮动。

20.行内元素布局混乱

产生条件:行内元素为包含框时,如果包含框包含的绝对定位元素以百分比为单位进行定位;

处理方法:在行内元素当中加入
{zoom:1},触发IE的hasLayout。关于hasLayout的更多介绍请参见日志:hasLayout IE浏览器bug的来源。**

hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时,它负责对自己和可能的后代元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完成这些工作。

默认hasLayout=true的标签:

<table> <td> <body> <img>


<input> <select> <textarea> <button> <iframe> <embed> <object> <applet> <marquee>

很多情况下,把hasLayout的状态改成true可以解决很大部分ie显示的bug。hasLayout属性不能直接设定,通过设定一些特定的css属性来触发并改变hasLayout状态。

元素hasLayout而导致的问题其实一般都很容易发现:往往是内容出现错位甚至完全不可见。

如:当一个元素内含浮动或绝对定位的内容时,它通常会表现出奇怪和错误的行为

一般如果是因为layout而引起的显示不符期望效果的话,在ff下会表现正常,而在ie下会出现错误。这个时候可以尝试触发父容器及其中的子容器的haslayout属性,通常可以通过加上zoom: 1;来调试。直到找到了产生问题的元素,再进行针对性的修正。最好的办法是对这个元素设置尺寸属性。但是,有时不便指定尺寸属性的情况下,就只能寻找替代方案了。对于ie7,最好的办法是设置最小高度属性为0;这个技术是无害的,因为0本来就是这个属性的初始值。而且没有必要对其他浏览器隐藏这个属性。而对于ie6和更早版本中触发一个元素hasLayout的方法是在overflow属性是visible的情况下设置这个元素的高度属性为1%,然后对其他浏览器隐藏这个设置。这种技术就是著名的Holly hack。

display

启动
haslayout的值
:inline-block

取消
hasLayout的值
:
其他值

width/height

启动
hasLayout的值:除了
auto
以外的值

取消
hasLayout的值:
auto

position

启动
hasLayout的值:
absolute

取消
hasLayout的值:
static

float

启动
hasLayout的值:
left

right

取消
hasLayout的值:
none

zoom

启动
hasLayout的值:有值

取消
hasLayout的值:
narmal
或者空值(zoom是微软IE专有属性,可以触发hasLayout但不会影响页面的显示效果。zoom: 1常用来除错,ie 5不支持。)

ie7还有一些额外的属性可以触发该属性(不完全列表):min-height: (任何值)

max-height: (任何值除了none)
min-width: (任何值)
max-width: (任何值除了none)
overflow: (任何值除了visible)
overflow-x: (任何值除了visible)
overflow-y: (任何值除了visible)

21.多显示一个字

产生条件:多个浮动元素中间夹杂
HTML注释语句,浮动元素宽度设置为100%;则在下一行多显示一个上一行的最后一个字符;

处理方法:果断删掉注释!

22.CSS优先级 !important

产生条件:
IE6当中,在同一组CSS属性中,!important不起作用;

处理方法:单独设置。

23.img图片下部高度多余5px

产生条件:
IE6浏览器;

处理方法:
1、将图片转化为块级对象,即display:block。还有四种其他方法

1、将图片转换为块级对象即,设置img为“display:block;”。

2、设置图片的垂直对齐方式

即设置图片的
vertical-align属性为“top,text-top,bottom,text-bottom”也可以解决。

3、设置父对象的文字大小为0px

即,在代码中添加一行:
“font-size:0;”可以解决问题。但这也引发了新的问题,在父对象中的文字都无法显示。就算文字部分被子对象括起来,设置子对象文字大小依然可以显示,但在CSS效验的时候会提示文字过小的错误。

4、改变父对象的属性

如果父对象的宽、高固定,图片大小随父对象而定,那么可以设置
“overflow:hidden;”来解决。

5、设置图片的浮动属性

即在本例中增加一行
CSS代码: img {float:left;}”。如果要实现图文混排,这种方法是很好的选择。


以上为个人意见,如有雷同,纯属巧合,欢迎大家多提意见!Bey 了 个 Bey ~

上一篇下一篇

猜你喜欢

热点阅读