CSS HACK搜集:有关IE6/FF/google等访问器hack的方式详

日期:2021-01-20 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

1、IE6 下

a标识嵌套循环img标识IE下会有边框,那是超连接默认设置的款式,处理方法:img{border:0 none;}

1、终极方式:标准注解

<!--[if lte IE 6]> 这段文本仅显示信息在 IE6及IE6下列版本号。 <![endif]-->

<!--[if gte IE 6]> 这段文本仅显示信息在 IE6及IE6以上版本号。 <![endif]-->

<!--[if gt IE 6]> 这段文本仅显示信息在 IE6以上版本号(不包括IE6)。 <![endif]-->

<!--[if IE 5.5]> 这段文本仅显示信息在 IE5.5。 <![endif]-->

<!--在 IE6及IE6下列版本号中载入css-->

<!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" mce_href="css/ie6.css" /><![endif]-->

缺陷是在IE访问器下将会会提升附加的HTTP恳求数。

2、CSS挑选器区别

IE6不适用子挑选器;先对于IE6应用基本声明CSS挑选器,随后再用子挑选器对于IE7+及别的访问器。

/* IE6 专用 */

.content {color:red;}

/* 别的访问器 */

div>p .content {color:blue;} -->

3、PNG半全透明照片的难题

尽管能够根据JS等方法处理,但仍然存在加载速率等难题,因此,这个在设计方案上能防止還是尽可能防止为好。以做到网站最大提升。

4、IE6下的圆角

IE6不适用CSS3的圆角特性,性价比最高的处理方式便是用照片圆角来取代,或舍弃IE6的圆角。

5、IE6情况闪动

假如你给连接、按钮用CSS sprites做为情况,你将会会发如今IE6下会有情况图闪动的状况。导致这个的缘故是因为IE6沒有将情况图缓存文件,每次开启hover的情况下都会再次载入,能够用JavaScript设定IE6缓存文件这些照片:

document.execCommand("BackgroundImageCache",false,true);

6、最少高宽比

IE6 不适用min-height特性,但它却觉得height便是最少高宽比。处理方式:应用ie6不适用但其余访问器适用的特性!important。

#container {min-height:200px; height:auto !important; height:200px;}

7、最大高宽比

//立即应用ID来更改元素的最大高宽比
var container = document.getElementById('container');
container.style.height = (container.scrollHeight > 199) ? "200px" : "auto";

//写成涵数来运作
function setMaxHeight(elementId, height){
var container = document.getElementById(elementId);
container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto";
}

//涵数示例
setMaxHeight('container1', 200);
setMaxHeight('container2', 500);

8、100% 高宽比

在IE6下,假如要给元素界定100%高宽比,务必要确立界定它的父级元素的高宽比,假如你必须给元素界定满屏的高宽比,就得先给html和body界定height:100%;。

9、最少宽度

同max-height和max-width1样,IE6也不适用min-width。

//立即应用ID来更改元素的最少宽度
var container = document.getElementById('container');
container.style.width = (container.clientWidth < width) ? "500px" : "auto";

//写成涵数来运作
function setMinWidth(elementId, width){
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth < width) ? width + "px" : "auto";
}

//涵数示例
setMinWidth('container1', 200);
setMinWidth('container2', 500);

10、最大宽度

//立即应用ID来更改元素的最大宽度
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";

//写成涵数来运作
function setMaxWidth(elementId, width){
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
}

//涵数示例
setMaxWidth('container1', 200);
setMaxWidth('container2', 500);

11、双边距Bug

当元素波动时,IE6会不正确的把波动方位的margin值双倍测算。本人感觉较好处理方式是防止float和margin另外应用。

12、消除波动

假如你想用div(或别的器皿)包裹1个波动的元素,你会发现务必给div(器皿)界定确立的height、width、overflow当中1个特性(除auto值)才可以将波动元素严密地包裹。

#container {border:1px solid #333; overflow:auto; height:100%;}
#floated1 {float:left; height:300px; width:200px; background:#00F;}
#floated2 {float:right; height:400px; width:200px; background:#F0F;}

13、波动层移位

当內容超过外宽容器界定的宽度时,在IE6中器皿会忽略界定的width值,宽度会不正确地随內容宽度提高而提高。

波动层移位难题在IE6下沒有真实令人令人满意的处理方式,尽管可使用overflow:hidden;或overflow:scroll;来调整,但hidden非常容易致使别的1些难题,scroll会破坏设计方案;JavaScript也无法很好地处理这个难题。因此提议是1定要在合理布局上防止这个难题产生,应用1个固定不动的合理布局或操纵好內容的宽度(给里层加width)。

14、躲猫猫bug

在IE6和IE7下,躲猫猫bug是1个十分恼人的难题。1个撑破了器皿的波动元素,假如在他以后有不波动的內容,而且有1些界定了:hover的连接,当电脑鼠标移到那些连接上时,在IE6下就会开启躲猫猫。

处理方式很简易:
1.在(那个未波动的)內容以后加上1个<span style="clear: both;">
2.开启包括了这些连接的器皿的hasLayout,1个简易的方式便是给其界定height:1%;

15、肯定精准定位元素的1像素间隔bug

IE6下的这个不正确是因为进位解决偏差导致(IE7已修补),当肯定精准定位元素的父元素高或宽为单数时,bottom和right会造成不正确。唯1的处理方法便是给父元素界定确立的高宽值,但针对液态合理布局沒有完善的处理方式。

16、3像素间隔bug

在IE6中,当文字(或无波动元素)跟在1个波动的元素以后,文字和这个波动元素之间会多出3像素的间距。
给波动层加上 display:inline 和 ⑶px 负值margin
给正中间的內容层界定 margin-right 以改正⑶px

17、IE下z-index的bug

在IE访问器中,精准定位元素的z-index等级是相对各有的父级器皿,因此会致使z-index出現不正确的主要表现。处理方式是给其父级元素界定z-index,一些状况下还必须界定position:relative。

18、Overflow Bug

在IE6/7中,overflow没法正确的掩藏有相对性精准定位position:relative;的子元素。处理方式便是给外宽容器.wrap再加position:relative;。

19、横向目录宽度bug

假如你应用float:left;把<li>横向摆列,而且<li>内包括的<a>(或别的)开启了hasLayout,在IE6下就会有不正确的主要表现。处理方式很简易,只必须给<a>界定一样的float:left;便可。

20、目录阶梯bug

目录阶梯bug一般会在给<li>的子元素<a>应用float:left;时开启,大家原意是要做1个横向的目录(一般是导航栏栏),但IE却将会展现出竖直的或阶梯状。处理方法便是给<li>界定float:left;而非子元素<a>,或给<li>界定display:inline;还可以处理。

21、竖直目录空隙bug

当大家应用<li> 包括1个块级子元素时,IE6(IE7也是有将会)会不正确地给每条目录元素(<li>)之间加上间隙。

处理方式:把<a>flaot而且消除float来处理这个难题;此外1个方法便是开启<a>的hasLayout(如界定高宽、应用zoom:1;);还可以给<li> 界定display:inline;来处理此难题;此外也有1个极趣味的方式,给包括的文字结尾加上1个空格。

22、IE6中的:hover

在IE6中,除(必须有href特性)才可以开启:hover个人行为,这防碍了大家完成很多电脑鼠标碰触实际效果,但還是有1些方法是能够处理它的。最好是是不必用:hover来完成关键的作用,仅仅只用它来强化实际效果。

23、IE6调剂对话框尺寸的 Bug

当把body垂直居中置放,更改IE访问器尺寸的情况下,任在哪body里边的相对性精准定位元素都会固定不动没动了。处理方法:给body界定position:relative;就可以了。

24、文字反复Bug

在IE6中,1些掩藏的元素(如注解、display:none;的元素)被包括在1个波动元素里,就有将会引起文字反复bug。处理方法:给波动元素加上display:inline;。

——————————————————————————————————————————————————————————————————


25、IE6下 行高 line-height实效,乃至变为两杯行高


这必须ie6 的hack 降低目标1半行高


另:在ie6中,当文本和img、input、textarea、select、object等目标在同1个器皿中的情况下,line-height特性无效。仅有全文本时,line-height特性才合理。
处理方式:

在这其中1个非文本的目标的款式中提升:

拷贝编码
编码以下:

margin: (器皿的line-height - 目标自身的高宽比)/2px 0; 02.
vertical-align: middle;