绝续续的于支付进程被募集了众多之。发现凡是由其低级元素ul的padding引 起。

ie6,ie7,ie8 css bug兼容解决记录

转载自:ie6,ie7,ie8 css
bug兼容解决记录 – 前端开发

绝续续的当支付过程被募集了诸多的bug同该解决之法,都于是文章里记录下来了!希望以后解决类似问题之时光能快速解决

,也希望大家能当留言中跟进自己意识的ie6 7 8bug与解决办法!

1:li边距“无故”增加

另外业务都是起因的,li边距也无差。

先描述一下现实状况:有些时候li边去会冷不丁增 加博,值吗非稳定(只当IE6/IE7有这种光景),让丁摸不着头脑,仔细“研究”发现凡是由于那个低级元素ul的padding引 起,padding的上下值对li有震慑,左右管影 响。所以不得不笨手笨脚地拿padding去丢,换成margin。这是能够解决问题,但频繁无是我们怀念使之结果,或许 还会唤起外不必要的良现象。

现在到底发现解决此题材之艺术,其实非常简短,既然是有ul引 起底,就设置ul的来得形式吗*display:inline-block;即可,前面加*大凡只是 针对IE6/IE7有效,其他浏览器并无渲染之特性。

2:分页数字 字体用“Arial ”加粗不抖动

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns=”http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv=”Content-Type”content=”text/html; charset=gb2312″/>
<title>无标题文档</title>
<link href=”css/style.css”rel=”stylesheet”type=”text/css”/>
<style type=”text/css”>
body, ul, h1 {
font-family:Arial;
font-size:12px;
}
.page {
text-align:center;
}
.page a {
display:inline-block;
padding:5px 8px;
text-decoration:none;
border:1px solid #09F;

color:#FFF;
}
.page a:hover, .page .selected {
border:1px solid #CCC;

color:#000;
font-weight:bold;
}
</style>
</head>
<body>
<h1>分页样式</h1>
<div class=”page”> <a href=”#”>1</a> <a href=”#”class=”selected”>2</a> <a href=”#”>3</a> <a href=”#”>4</a> <a href=”#”>5</a>
<a href=”#”>6</a> <a href=”#”>7</a> <a href=”#”>8</a> <a href=”#”>9</a> <a href=”#”>10</a> </div>

</body>
</html>

3:IE6 CSS选择器区分IE6
IE6不支持子选择器;先对IE6使用正规申明CSS选择器,然后又就此子选择器针对IE7+及外浏览器。
/*IE6 专用 */
.content {color:red;}
/* 其他浏览器 */
div>p .content {color:blue;}

4:IE6最小高度
IE6 不支持min-height属性,但它们也看height就是太小高度。解决措施:
以ie6不支持而其余浏览器支持的特性!important。
#container{min-height:200px; height:auto !important; height:200px;}

5:IE6100% 高度
当IE6下,如果一旦叫元素定义100%可观,必须使明了定义其的父级元素的莫大,如果您需要被元素定义满屏的惊人,就得
先给html和body定义height:100%;。

6:IE6躲猫猫bug
以IE6和IE7下,躲猫猫bug是一个那个臭的问题。一个撑破了容器的变化元素,如果当外之后产生非转移的情,并且有同样
头定义了:hover的链接,当鼠标移到那些链接上时不时,在IE6下就是见面触发躲猫猫。
化解智好简短:
1.以(那个未变更的)内容后补充加一个<span style=”clear: both;”> </span>
2.点发包含了这些链接的容器的hasLayout,一个简约的方式就是是于其定义height:1%;

7:IE6绝对定位素的1像素间距bug
IE6下之之错误是由于进位处理误差造成(IE7已修复),当绝对定位元素的父元素高或者宽为奇数时,bottom和right会
起错误。唯一的解决办法就是叫父元素定义明确的过人宽值,但对此液态布局尚未到的解决方式。

8: IE下z-index的bug
在IE浏览器中,定位元素的z-index层级是对立于个别的父级容器,所以会见促成z-index并发谬误的变现。解决方式是为
彼父级元素定义z-index,有些情况下还需要定义position:relative。

9: Overflow Bug
以IE6/7丁,overflow无法正确的隐蔽有相对固化position:relative;的子元素。解决办法就是是被外包容器.wrap加上
position:relative;。

10: 横向列表宽度bug
要是您以float:left;把<li>横向摆列,并且<li>内含的<a>(或外)触发了 hasLayout,在IE6下便会见发出错的
呈现。解决方法充分简单,只待被<a>定义同样的float:left;即可。

11: 列表阶梯bug
列表阶梯bug通常会于被<li>的子元素<a>使用float:left;时接触,我们本意是一旦举行一个横向的列表(通常 是导航栏),
可是IE却可能见出垂直的还是阶梯状。解决办法就是给<li>定义float:left;而非子元素<a>,或者 给<li>定义
display:inline;也可缓解。

12: 垂直列表间隙bug
当我们采取<li> 包含一个块级子元素时,IE6(IE7也产生或)会错地被各级条列表元素(<li>)之间添加空隙。
缓解智:把<a>flaot并且消除float来解决是题材;另外一个艺术尽管是触发<a>的hasLayout(如定 义高宽、
用zoom:1;);也得以让<li> 定义display:inline;来缓解此题材;另外还有一个最有意思之方法,给带有的中庸
情节尾添加一个空格。

13: IE6调整窗口大小的 Bug
当把body居中放置,改变IE浏览器大小的时节,任何在body里面的相对稳定元素还见面稳定不动了。解决办法:
给body定义position:relative;就行了。

14: 文本重复Bug
在IE6中,一些躲的元素(如注、display:none;的素)被含有在一个生成元素里,就起或引发文本重复bug。
解决办法:给浮动元素添加display:inline;。

15:链接a的title属性中的文换行

何吧非说,先上独图

 

我们且了解,可以吃链接a加上title属性,这样鼠标移动上去会显示title属性定义之 文字,常常用来加以有提拔语句,

诸如点击查看详情之类的,代码形如:

<a href=”#” title=”点击查看详情”>链接xx</a>

。之前一直从未仔细留意了这东西。如果鼠标浮动上去要显示更多东西的话,怎么落实呢。第一 反应是jquery的tooltip插件。今天无意中窥见之一学院的网站鼠标移动上去可以显示这样完整的信,效果看起如尚好,就想看怎么开的, 找了生,没察觉有Javascript脚本,再望链接的地方同看,终于让自己发觉了门道了:

<a href=’#’ target=”_blank” title=”标题: 关于对我校2006年交2009年发展党员工作情景进…
发表日期: 2010-5-31 16:05:08 类别:院务通知 点击: 139″>
[05-31]  关于对我校2006年交2009年发展党员工作情况进…
</a>

注意到了吗。。很简短,只要用
这样的转义符号,即可兑现换行。在有些tooltip要求定制性不强的情形下,这样的示效果相互 当不错,而且是浏览器原生的功能,安逸。

哟,虽然称之为精通div+css,但是发现一些微但是好实用的技术自己还非理解,看来html还有好多东西得以开。
16:如何去丢点击链接时的虚线

缓解方案1:在<a href=”http://blog.sina.com/wangfengteacher"onFocus="this.blur()&gt; Mike blog</a>
解决方案2:在标签中投入 hidefocus<a href=”http://blog.sina.com/wangfengteacher"hidefocus&gt; Mike blog</a>
缓解方案3: 如果总是太多,可以用外表链接 .HTC 文件。如,blur.htc
文本内容如下:
<public:attach event=”onfocus”
onevent=”makeblur()”></public:attach>

<SCRIPT language=javascript>
function makeblur(){
this.blur();
}
</SCRIPT>
于 CSS 中进入如下代码:
A { behavior:url(blur.htc); }
缓解方案4 ( 推荐 ):使用CSS样式,可在代码:a {blr:expression_r(this.onFocus=this.blur())}

要是FF等浏览器的口舌可这么描绘 a{ouline:none;}

17:制作1px仔细线表格

化解方案1 ( 推荐):我们只要给这个table一个border-collapse:collapse的体裁,就得上这效果了。
具体如下:
1、HTML结构:
<table width=”300″ border=”1″ cellpadding=”0″cellspacing=”0″ bordercolor=”#C0C0C0″
style=”border-collapse:collapse;”>
<tr>
<td> </td>

<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

18:IE6 下z-index无效

在CSS中,通过z-index这个特性改变层级,要让z-index起作用有个前提,就是因素的position属性要 是relative,absolute或是fixed。

z-index层级越强,内容愈发应以点显示。在多数的浏览器在多数之景下,确实如此,但是未绝,尤其遇IE6。

1、关于效果截图的把必要说明

脚的未是废话,是为了更爱的亮自己下面唾沫横飞的内容。

以下有所结果截图的生背景如下:
1、页面及一定不动的,一成不变的,送豪宅为不见面从良的凡一个黑色背景,透明度 40%,几乎满屏显示的层级为1的绝定位层。HTML为:

<div></div>

对应CSS为:#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}

打算是为着让层级关系一目了然。看:

当时证明内容在z-index为1之绝对定位层之下。
旋即证明内容在z-index为1的绝定位层之上。

2、页面及做比的凡玉女图片,图片于半晶莹剔透黑色绝对定位层的方面还是下面很爱辨别,这样,您就可知对自家所说的z- index不起作用有特别直观的认识了。

2、IE6的埋怨:浮动受自身陷入
兹初步真的的讲述 问题的发,原因以及缓解了。首先讲话出口第一种z-index无论设置多大且不起作用情况。这种情形有的规格有三独:1、父标签 position属性为relative;2、问题标签无position属性(不包括static);3、问题标签包含浮动(float)属性。
卿 可以拿下面的代码自己开只大概测试:

<div></div>
<div style=”position:relative; z-index:9999;”>
<img style=”float:left;” src=”http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg” />
</div>

女儿的,这z-index都9999了,层级够高吧,但是,看下的图:

当下无异相比就理解问题了,可能有人会疑窦,这会无会见是IE6的relative自己感冒了,而休是生成(float)携带 了“甲流病毒”。好,我现去丢浮动,HTML代码如下:

<div></div>
<div style=”position:relative; z-index:9999;”>
<img src=”http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg” />
</div>

结果IE6下:

自己想,问题应都知了,至于原因,我开始以为是haslayout搞的浅,后来,用zoom一测试,发现未是(IE7 下无此bug也认证不是 haslayout的原委),似乎就是以此float会给z-index失效。由于将标div的position:relative属性改吗 absolute可以解决当下同题目,我哪怕嘀咕是无是浮动受relative发生了些变化,float与relative在档次定位上足说凡是近亲,会无会见 是因马上两边搅和当联合从而什么“畸形”“体弱多患”就应运而生了。这只是是自我的猜测而已,真正的缘故或失去问问IE6的继母吧。

解决智,解决智有三,1、position:relative改 为position:absolute;2、去除浮动;3、浮动 元素添加position属性(如relative,absolute等)。

3、固执的IE6:它不过认第一只大人
想必过多人知 道,这IE6下,层级的音量不仅使扣押自己,还要扣自己的老爸是后台是否足够硬。用术语具体讲述为:
父标签position属性为relative 或absolute时,子标签的absolute属性是相对于父亲标签而言的。而于IE6下,层级的变现有时候不是看子标签的z-index多赛,而若看它们 们的父标签的z-index谁大孰不如。

有一定经验的口可能还了解点的真相。但是,相信这个中很多人无晓IE6下,决定层级高低之莫是目前之父标签,而是整 个DOM tree(节点树)的第一只relative属性的父标签。有时平时我们基本上处理一个爸爸标签,z-index层级多设复杂的情状不多见,所以难免会发出识上 的小不点儿错误。

好,下面展示是bug。

准特别粗略,只要绝对定位的首先个因素的率先单爸爸,或者说是最总的要命爹爹级别之丁的relative属性小于黑色半 透明层的z-index层级。例如下面的HTML代码:

<div></div>
<div style=”position:relative;”>
<div style=”position:relative; z-index:1000;”>
<div style=”position:absolute; z-index:9999;”>
<img src=”http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg” />
</div>
</div>
</div>

可看看,mm3图片的父标签div 是纯属定位,层级9999,比1良多了,绝对定位的父标签层级1000(10000也同等),也较黑色半透明层的z-index:1怪多矣,但是,我们只是 怜的IE6童鞋——

复看以Firefox为代表的外童鞋:

IE7与IE6有正在同一的bug,原因非常简单,虽然图片所在div当前之老爸层级特别高(1000),但是出于老爸的始终爸 不至用,可怜了9999这样强势的儿女没有起色的日啊!

接头原委解决就非常轻松了,给第一随便老爸添加z-index后底HTML代 码如下:

<div></div>
<div style=”position:relative; z-index:1;”>
<div style=”position:relative; z-index:1000;”>
<div style=”position:absolute; z-index:9999;”>
<img src=”http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg” />
</div>
</div>
</div>

结果IE6童鞋喜笑颜开,春光灿烂:

19:css reset中的list-style:none

在IE6,7下,当UL不具有float:left;display:inline;时:
任凭发没有起list-style:none这个特性,列 表符都给藏,不占位置(下面代码中之5,6)
当UL具有float:left;display:inline;属性时
list- style:none,列表符被埋伏,但是仍然留下有职位(list-style-position:inside);
未 设置list-style:none;列表符被隐藏,也未占位(list-style-position:outside)

以firefox中若list-style-type为none ,则 无论list-stype-position的值为outside或inside , list-style都能够可怜好之为隐形
要在IE6,7遇,仅 设置list-style:none,并不足以解决有题目
故我当在css reset的时利用 list-style:none outside none 更好

20:链接去边线(完全匹配)

a,a:hover{outline:none; blur:expression(this.onFocus=this.blur());}

21: display:inline-block 额外有的6PX 或者4px margin

今当开一个Timeline的模块的早晚遇到一个来之不易的问题: 给元素添加display:inline-block 属性的时光会来额外的4px之margin-right。

原始代码

.YP_timelineChart_box li{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
text-indent:-3000px;
width:5px;
vertical-align:bottom;

position:relative;
}

页面渲染结果:

 

各级一样排列都见面于右侧起外边距4px,苦思不得其解,尝试借助的异乡距,但是关乎到其它的题材:每个li标签会重叠1-2只px,妨碍到鼠标hover状 态的轩然大波。尝试修改doctype类型也丢失效果。后来尝试了另外一个办法:

管原本的HTML 代码结构:

更改为:

 

这样便无见面有额外的外地距,也打出不明了怎么会出现这种题材。先暂时记下,以后再次钻研讨。

22: IE6中伪类:hover的采取以及BUG

先前没有遇到类似的问题,一番google,才晓得这是IE6处理CSS伪类:hover的Bug。例如如下的代码:

<style>
a {color: #333;}
a span {color: green;}
a:hover {}
a:hover span {color: red; }
</style>
<a href=”http://www.taobao.com“> 淘宝网 <span> 淘你喜欢 </span></a>

以IE7/FF中,鼠标移动到链接上时,”淘你喜爱”字样会成为红色,但IE6则不管反射。所以IE6的bug就是如果a 与 a:hover 的css定义是同样的,也就是说要a:hover 中绝非样式的转,hover就无见面给点。但万一当a:hover{}增加有一定的特性,例如

a:hover{border:none;}
或者
a:hover{padding:0;}
又或者
a:hover{background: none;}

这会儿hover就好触发了。

23:原来IE6支持!important

.demo { color:#F00!important; color:#000; }/*IE6显示错误理解:.demo显示也黑色*/
/*假若下IE6是正确理解的:.demo显示也红色*/
.demo { color:#F00!important;}
.demo { color:#000; }

24:去掉button按钮左右点儿止的留白

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<style>
*{padding:0; margin:0}
input,button{overflow:visible;padding:0;}
</style>
</head>
<body>
<form id=”form1″ name=”form1″ method=”post” action=””>
<input type=”submit” name=”button” id=”button” value=”button按钮左右留白的缓解办法” />
</form>
<button><span>button按钮左右留白的缓解方式</span></button>
</body>
</html>

25:中文字体在css中之写法

黑体SimHei\9ED1\4F53黑体

宋体SimSun\5B8B\4F53宋体
新宋体 NSimSun\65B0\5B8B\4F53新宋体

仿宋FangSong\4EFF\5B8B仿宋
楷体KaiTi\6977\4F53 楷体

微软正黑体Microsoft JhengHei\5FAE\x8F6F\6B63\9ED1\4F53微软正黑体
微软充分黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1稍稍软雅黑

幼圆 YouYuan\5E7C\5706幼圆

26: ie6里width:100%凡是对立于上有可观设置的因素 其他浏览器是对立于上只相对固化还是切定位的元素

<div style=” width:600px; height:600px; background:#000;”>

<div style=” width:500px; height:500px; background:#333;”>

<div style=” float:left; background:#666; width:400px;” >

<div style=” width:300px; height:300px; background:#999;”>

<div style=” width:100%; height:100%; background:#f00; position:absolute; left:0; top:0;”>

于非ie6的浏览器被都是充满屏幕的红, 说明非ie6的浏览器的width和height的百分比,都是对立的达标单相对固定还是绝对定位的要素,没有就也html元素

,而ie6中的width和height 的比重,相对的是达个发大富显示设置的因素,而且height的比重设置失效,所以上述代码在ie6中便起宽穿越了外的父元素而遇见width:500px;的因素的时刻,边将团结设置成了width:500px;而height的装则失效, 这个, 让人口格外蛋疼!ie6,真的该早点走了!

</div>

</div>

</div>

</div>

</div>

27: ie不缓存背景图片的解决办法

赛性能web开发被,一布置小的图形请能看的就是省,可IE6存在不缓存背景图的bug.如果重复使用了一个图纸作为背景,那么每用平等不行就是见面重复去服务器拉一不善。。。给服务器带来巨大的下压力。解决智发生点儿种植,

1:采用JS

var ua = navigator.userAgent.toLowerCase();

var isIE6 = ua.indexOf(“msie 6”) > -1;//判断是否为IE6

// remove css image flicker

//IE6下默认不缓存背景图片,CSS里老是变更图片的岗位时还见面再次发起呼吁,用之主意告诉IE6缓存背景图片

if(isIE6){

try{

document.execCommand(“BackgroundImageCache”, false, true);

}catch(e){}

}

2.当页面及一直以1只DIV元素来加载该图片,这样加载图片就可知真的为缓存,鼠标移动为不见面发送请求了。

28:ie6下css实现max/min-width/height

_width:expression(this.width>300?”300px”:ture); max-width:300px;

_height:expression(this.height>300?”300px”:ture); max-height:300px;

29:css空白外边距互相叠加的解决智

body{width:300px; font-family:’微软雅黑’; font-size:1em; text-indent:10px; line-height:1.25;}

div{background:#000;margin:10px;}

div p{background:#f60;margin:15px}

这是一个div元素内嵌套p的简单样例,先别复制保存也html测试,在您看罢上面的代码后,你是否认为它们产生也汝呈现如下图的功能?

哼,现在公可以复制上面代码,保存至本地,然后以浏览器被打开.你会怪之觉察,它呈现为您的力量是如此的:

怎么会这么为?按CSS中,对于发生块级子元素的元素计算高度的方,如果元素没有垂直边框和填充,那那个入骨就是其子元素顶部及底边框边缘之间的距离.故,子元素的顶部及底部空白边就突出到元素的之外了.p元素的15px异地距同div元素的10px之异地距形成一个纯净的15px直空白边,另外,形式的是拖欠白边并非为div所包围,而是表现在div的客围.所以,我们来看了亚布置效果图.
安解决?本人于推荐两种缓解智:
这个,为外元素定义透明边框.具体到本例,即当样式div中投入border:1px solid #ddd;
其,为外元素定义内边距填充..具体到本例,即当样式div中加入padding:1px
除此以外,还好透过外元素绝对定位,或者定义子元素浮动等方法实现.

30:纯css解决多履字垂直居中

<style type=”text/css”>

.alert{

width:400px;

height:250px;

display:table-cell;

vertical-align:middle;

line-height:1.5em;

border:1px solid red;

}

.alert_blank{

height:100%;

width:0;

display:inline;

vertical-align:middle;

zoom:1;

}

.alert_con{

width:100%;

zoom:1;

display:inline;

vertical-align:middle;

}

</style>

<div class=”alert”>

<div class=”alert_con”>哥乃多行文字垂直居中~哥乃多行文字垂直居中~哥乃多行文字垂直居中~哥乃多行文字垂直居中~</div>

</div>

该大体原理也:第一个alert_blank容器,display:inline以后当行内元素,它的惊人为100%,宽度却也0,相当给把外层容器左边框的一致漫长透明底丝,这样就让外层容器内只有存在一行。外层容易之vertical-align:middle使得该内部相当给一行字垂直居中。真正盛放内容的div也是display:inline,它对外和blank垂直居中,只要中文字不越blank的可观,这个意义将凡两全的。虽然于语义化上说道,用空白div布局说非顶过去,但是缺点不掩瑜。另:zoom:1凡为触发hasLayout。

31:关于flash遮盖div浮动层

(a) place Flash embed script in <div> container (I use SWFObject.js)[以flash嵌入脚本放到一个div容器中]

(b) add wmode=transparent to Flash embed script[加wmode=transparent 到flash嵌入脚本]

(c) set <div id=”flashcontent”> container with z-index:-1; [以外层容器的z-index设置也-1]

(d) set <body> tag with style .. position:relative;left:0px;top:0px;z-index:0;
(otherwise Firefox does not accept negative z-index)

(e) set floating iframe in container with z-index: 99;[拿转的iframe在容器被的zindex设置也99]

(f) use CSS to position flashcontent and htmlcontent containers.[用css来调整flash容器和html容器的职务]

任何方案网上比多呈现,不开阐述.在是说生利用第一独方案如何化解:

var so = new SWFObject(“XXX.swf”, “flashId”, “宽度”, “高度”, “版本”, “背景色”);

//设置flash不遮盖div层

so.addParam(“wmode”, “opaque”);

so.write(“flashcontent”);

如此这般设置即可为flash无法遮盖住div

32:如何处理ie6的字行高
ie6下汉字就是会展示偏上岗位,而以正儿八经浏览器被不存在是问题字体 Tahoma,试下
不过要发确定第一单字是因此吗的,那即便只好忽略这个题目..我算明白淘宝也甚把Tahoma字体放到第一各类了

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns=”http://www.w3.org/1999/xhtml"&gt;

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>测试ie6的文字行高表现</title>

<style type=”text/css”>

body,ul,li,p {margin:0;padding:0;}

body { font:12px/1.5  Tahoma,”宋体”,Arial, Helvetica, sans-serif; }

ul {float:left;list-style:none; margin-bottom:10px;}

ul li, p { margin-top:4px;background:silver;clear:left;}

ul li {float:left;margin-top:4px;}

</style>

</head>

<body>

<ul>

<li>岁月不饶人啦</li>

<li>hjgt</li>

</ul>

<p>岁月不饶人呀</p>

<p>hjgt</p>

</body>

</html>

33:利用 CSS 跨浏览器地潜伏文字一法

ont-size:0;        // for firefox & opera

color: transparent; // for webkit

overflow:hidden;    // for IE

font-size:0;

filter:alpha(opacity=0);

自测后相当的浏览器如下:

IE 6-8

Firefox 1-4

Opera 9-10

Safari 3-5

Chrome 1-6

34:button在chrome下默认有2px之margin

<button>在chrome下出星星点点像素margin</button>

35:ie6和ie7里面margin失效

<div style=”padding:20px;background:#f00;”>

<div style=”background:#fff;height:200px;margin:50px;”>我的margin在ie里面失效了</div>

解决办法去掉其中div的冲天

1:li边距“无故”增加

其余事情都是生原因的,li边距也无差。

优先描述一下切实可行状况:有些时候li边去会骤增 加博,值为非定点(只当IE6/IE7有这种情景),让人口摸不着头脑,仔细“研究”发现凡是由其低级元素ul的padding引 起,padding的上下值对li有震慑,左右管影 响。所以只好笨手笨脚地拿padding去丢,换成margin。这是能够解决问题,但屡屡无是我们纪念要的结果,或许 还会见挑起外未必要之死去活来现象。

今日算是意识解决此问题的措施,其实十分简单,既然是来ul引 起的,就设置ul的示形式呢*display:inline-block;即可,前面加*凡是特 针对IE6/IE7有效,其他浏览器并无渲染之特性。

2:分页数字 字体用“Arial ”加粗不抖动

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns=”http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv=”Content-Type”content=”text/html; charset=gb2312″/>
<title>无标题文档</title>
<link href=”css/style.css”rel=”stylesheet”type=”text/css”/>
<style type=”text/css”>
body, ul, h1 {
font-family:Arial;
font-size:12px;
}
.page {
text-align:center;
}
.page a {
display:inline-block;
padding:5px 8px;
text-decoration:none;
border:1px solid #09F;

color:#FFF;
}
.page a:hover, .page .selected {
border:1px solid #CCC;
background-color:#FFF;
color:#000;
font-weight:bold;
}
</style>
</head>
<body>
<h1>分页样式</h1>
<div class=”page”> <a href=”#”>1</a> <a href=”#”class=”selected”>2</a> <a href=”#”>3</a> <a href=”#”>4</a> <a href=”#”>5</a>
<a href=”#”>6</a> <a href=”#”>7</a> <a href=”#”>8</a> <a href=”#”>9</a> <a href=”#”>10</a> </div>

</body>
</html>

3:IE6 CSS选择器区分IE6
IE6不支持子选择器;先对IE6使用正规申明CSS选择器,然后重新就此子选择器针对IE7+及另外浏览器。
/*IE6 专用 */
.content {color:red;}
/* 其他浏览器 */
div>p .content {color:blue;}

4:IE6最小高度
IE6 不支持min-height属性,但她却觉得height就是极小高度。解决智:
以ie6不支持不过其他浏览器支持之习性!important。
#container{min-height:200px; height:auto !important; height:200px;}

5:IE6100% 高度
在IE6下,如果要为元素定义100%惊人,必须要分明概念其的父级元素的万丈,如果你待给元素定义满屏的莫大,就得
先给html和body定义height:100%;。

6:IE6躲猫猫bug
当IE6和IE7下,躲猫猫bug是一个格外讨厌的问题。一个支撑破了容器的更动元素,如果当外之后产生非扭转的情,并且有一样
把定义了:hover的链接,当鼠标移到那些链接上常,在IE6下就是见面触发躲猫猫。
缓解智好简短:
1.每当(那个未变动的)内容后续加一个<span style=”clear: both;”> </span>
2.触及发包含了这些链接的容器的hasLayout,一个简便的法子就是是让那定义height:1%;

7:IE6绝对定位元素的1像素间距bug
IE6下的此似是而非是由于进位处理误差造成(IE7已修复),当绝对定位元素的父元素高要宽为奇数时,bottom和right会
产生错误。唯一的解决办法就是给父元素定义明确的强宽值,但对此液态布局尚未全面的化解措施。

8: IE下z-index的bug
在IE浏览器被,定位元素的z-index层级是对立于个别的父级容器,所以会见招z-index出现谬误的展现。解决方式是叫
那父级元素定义z-index,有些情况下还需定义position:relative。

9: Overflow Bug
以IE6/7遭到,overflow无法正确的隐身有相对稳定position:relative;的子元素。解决办法就是是被外包容器.wrap加上
position:relative;。

10: 横向列表宽度bug
只要您下float:left;把<li>横向摆列,并且<li>内含有的<a>(或另)触发了 hasLayout,在IE6下虽会见发误的
见。解决智十分简短,只需要为<a>定义同样的float:left;即可。

11: 列表阶梯bug
列表阶梯bug通常会于让<li>的子元素<a>使用float:left;时点,我们本意是只要做一个横向的列表(通常 是导航栏),
而是IE却可能见出垂直的要么阶梯状。解决办法就是让<li>定义float:left;而非子元素<a>,或者 给<li>定义
display:inline;也得以化解。

12: 垂直列表间隙bug
当我们应用<li> 包含一个块级子元素时,IE6(IE7也出或)会错地吃每条列表元素(<li>)之间添加空隙。
缓解方法:把<a>flaot并且消除float来缓解者问题;另外一个智就是是触发<a>的hasLayout(如定 义高宽、
行使zoom:1;);也堪给<li> 定义display:inline;来缓解者题材;另外还有一个不过有意思之计,给带有的缓
情尾添加一个空格。

13: IE6调整窗口大小的 Bug
当把body居中放置,改变IE浏览器大小的时节,任何在body里面的相对固化元素还见面固定不动了。解决办法:
给body定义position:relative;就行了。

14: 文本重复Bug
于IE6中,一些掩蔽的要素(如注、display:none;的元素)被含有在一个转移元素里,就生出或引发文本重复bug。
解决办法:给浮动元素添加display:inline;。

15:链接a的title属性中之文字换行

什么呢不说,先上单图

 

咱都知,可以为链接a加上title属性,这样鼠标移动上去会显示title属性定义的 文字,常常用来加以有提醒语句,

譬如点击查阅详情之类的,代码形如:

<a href=”#” title=”点击查阅详情”>链接xx</a>

。之前一直从未仔细留意了是事物。如果鼠标浮动上去要出示更多东西的话,怎么落实呢。第一 反应是jquery的tooltip插件。今天无意中发觉某学院的网站鼠标移动上去可以显示这样完整的音,效果看起似乎还足以,就想看看怎么开的, 找了产,没觉察有Javascript脚本,再为链接的地方同看,终于被我意识了路了:

<a href=’#’ target=”_blank” title=”标题: 关于对我校2006年届2009年发展党员工作状态进…
颁布日期: 2010-5-31 16:05:08 类别:院务通知 点击: 139″>
[05-31]  关于对我校2006年交2009年发展党员工作情景进…
</a>

留意到了啊。。很粗略,只要采取
这样的转义符号,即可实现换行。在片tooltip要求定制性不强之气象下,这样的来得力量相互 当不错,而且是浏览器原生的机能,安逸。

咦,虽然号称精通div+css,但是发现有些微但是充分实用的技巧自己还无懂得,看来html还有多事物得以挖掘。
16:如何去丢点击链接时的虚线

缓解方案1:在<a href=”http://blog.sina.com/wangfengteacher"onFocus="this.blur()&gt; Mike blog</a>
釜底抽薪方案2:在标签中进入 hidefocus<a href=”http://blog.sina.com/wangfengteacher"hidefocus&gt; Mike blog</a>
缓解方案3: 如果连接太多,可以用外表链接 .HTC 文件。如,blur.htc
文件内容如下:
<public:attach event=”onfocus”
onevent=”makeblur()”></public:attach>

<SCRIPT language=javascript>
function makeblur(){
this.blur();
}
</SCRIPT>
以 CSS 中加入如下代码:
A { behavior:url(blur.htc); }
解决方案4 ( 推荐 ):使用CSS样式,可投入代码:a {blr:expression_r(this.onFocus=this.blur())}

设是FF等浏览器的说话不过这样形容 a{ouline:none;}

17:制作1px细线表格

缓解方案1 ( 推荐):我们而被这table一个border-collapse:collapse的样式,就好直达这功能了。
切切实实如下:
1、HTML结构:
<table width=”300″ border=”1″ cellpadding=”0″cellspacing=”0″ bordercolor=”#C0C0C0″
style=”border-collapse:collapse;”>
<tr>
<td> </td>

<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

18:IE6 下z-index无效

于CSS中,通过z-index这个特性改变层级,要于z-index起作用有只前提,就是素的position属性要 是relative,absolute或是fixed。

z-index层级越强,内容进一步应该当地方显示。在大部的浏览器在多数之情形下,确实这样,但是未决,尤其遇IE6。

1、关于效果截图的数必要说明

脚的不是废话,是为了更易之明白自己下唾沫横飞的情。

以下有所结果截图的不行背景如下:
1、页面上稳住不动的,一成不变的,送豪宅为不见面从良的是一个黑色背景,透明度 40%,几乎满屏显示的层级为1之绝对化定位层。HTML为:

<div></div>

对应CSS为:#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}

打算是为让层级关系一目了然。看:

马上证明内容在z-index为1底断定位层之下。
随即证明内容在z-index为1之断然定位层之上。

2、页面上举行对比的凡嫦娥图片,图片以半晶莹剔透黑色绝对定位层的上面还是下面很轻辨认,这样,您就能够针对己所说之z- index不起作用有甚直观的认识了。

2、IE6的抱怨:浮动受自己陷入
而今始确实的描述 问题的出,原因和解决了。首先说道说第一栽z-index无论设置多强都不起作用情况。这种状态时有发生的规则来三单:1、父标签 position属性为relative;2、问题标签无position属性(不包static);3、问题标签包含浮动(float)属性。
乃 可以拿下面的代码自己举行只简单测试:

<div></div>
<div style=”position:relative; z-index:9999;”>
<img style=”float:left;” src=”http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg” />
</div>

女的,这z-index都9999了,层级够高吧,但是,看下的觊觎:

即时同样比就知问题了,可能有人会疑窦,这会不见面是IE6的relative自己感冒了,而休是浮动(float)携带 了“甲流病毒”。好,我本去丢浮动,HTML代码如下:

<div></div>
<div style=”position:relative; z-index:9999;”>
<img src=”http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg” />
</div>

结果IE6下:

自我眷恋,问题应有都知了,至于因,我起初以为是haslayout搞的坏,后来,用zoom一测试,发现不是(IE7 下无此bug也验证不是 haslayout的来由),似乎便是是float会为z-index失效。由于用标div的position:relative属性改吗 absolute可以化解当下无异于问题,我虽打结是不是变化受relative发生了数变化,float与relative在档次定位上可以说凡是近亲,会无会见 是以当时二者搅和当合就此啊“畸形”“体弱多病”就出现了。这仅仅是我之怀疑而已,真正的因由要去咨询IE6的后妈吧。

釜底抽薪方式,解决方法发生三,1、position:relative改 为position:absolute;2、去除浮动;3、浮动 元素添加position属性(如relative,absolute等)。

3、固执的IE6:它只有认第一个大人
或许过多人口理解 道,这IE6下,层级的轻重不仅要看自己,还要看自己的老爸是后台是否足够硬。用术语具体描述为:
父标签position属性为relative 或absolute时,子标签的absolute属性是对立于父亲标签而言的。而当IE6下,层级的变现有时候不是看子标签的z-index多大,而设扣押她 们的父标签的z-index谁大孰没有。

发生必然更的人或都知道者的事实。但是,相信当下间很多口无掌握IE6下,决定层级高低之免是现阶段底父标签,而是整 个DOM tree(节点树)的首先单relative属性的父标签。有时平时我们基本上处理一个慈父标签,z-index层级多设复杂的情形不多表现,所以难免会产生认识上 的微错误。

好,下面展示是bug。

标准好简单,只要绝对定位的率先只元素的第一独大人,或者说是最总的要命大级别的人数的relative属性小于黑色半 透明层的z-index层级。例如下面的HTML代码:

<div></div>
<div style=”position:relative;”>
<div style=”position:relative; z-index:1000;”>
<div style=”position:absolute; z-index:9999;”>
<img src=”http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg” />
</div>
</div>
</div>

可以视,mm3图形的父标签div 是绝定位,层级9999,比1充分多矣,绝对定位的父标签层级1000(10000乎同),也正如黑色半透明层的z-index:1那个多了,但是,我们而 怜的IE6童鞋——

更探以Firefox为表示的旁童鞋:

IE7与IE6有正值平等的bug,原因颇粗略,虽然图片所在div当前底老爸层级特别高(1000),但是由于老爸的直爸 不顶用,可怜了9999如此强势的男女没起色的日啊!

知情原因解决就非常轻松了,给第一无论老爸添加z-index后的HTML代 码如下:

<div></div>
<div style=”position:relative; z-index:1;”>
<div style=”position:relative; z-index:1000;”>
<div style=”position:absolute; z-index:9999;”>
<img src=”http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg” />
</div>
</div>
</div>

结果IE6童鞋喜笑颜开,春光灿烂:

19:css reset中的list-style:none

在IE6,7下,当UL不具有float:left;display:inline;时:
甭管发没有产生list-style:none这个特性,列 表符都于埋伏,不占位置(下面代码中之5,6)
当UL具有float:left;display:inline;属性时
list- style:none,列表符被隐形,但是还是留起岗位(list-style-position:inside);
未 设置list-style:none;列表符被隐藏,也无占位(list-style-position:outside)

当firefox中如list-style-type为none ,则 无论list-stype-position的值为outside或inside , list-style都能很好的给躲
一经以IE6,7饱受,仅 设置list-style:none,并不足以解决所有问题
所以自己觉得当css reset的下下 list-style:none outside none 更好

20:链接去边线(完全匹配)

a,a:hover{outline:none; blur:expression(this.onFocus=this.blur());}

21: display:inline-block 额外有的6PX 还是4px margin

今日在举行一个Timeline的模块的时光遇到一个棘手的问题: 给元素添加display:inline-block 属性的时会来额外的4px之margin-right。

原始代码

.YP_timelineChart_box li{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
text-indent:-3000px;
width:5px;
vertical-align:bottom;

position:relative;
}

页面渲染结果:

 

各一样排列都见面向右侧起外边距4px,苦思不得其解,尝试借助的异地距,但是涉及到其他的题材:每个li标签会重叠1-2单px,妨碍到鼠标hover状 态的事件。尝试修改doctype类型也不翼而飞效果。后来尝试了另外一个智:

拿原来的HTML 代码结构:

更改为:

 

如此这般即便无见面发生额外的异乡距,也搞不晓怎么会并发这种题材。先暂时记下,以后又钻研讨。

22: IE6中伪类:hover的利用以及BUG

原先从未有过遇到类似之问题,一番google,才懂就是IE6处理CSS伪类:hover的Bug。例如如下的代码:

<style>
a {color: #333;}
a span {color: green;}
a:hover {}
a:hover span {color: red; }
</style>
<a href=”http://www.taobao.com“> 淘宝网 <span> 淘你欣赏 </span></a>

以IE7/FF中,鼠标移动到链接上时常,”淘你爱”字样会成为红色,但IE6则不管反射。所以IE6的bug就是如果a 与 a:hover 的css定义是一律的,也就是说要a:hover 中从不样式的改变,hover就非会见叫点。但一旦当a:hover{}增加有一定的性,例如

a:hover{border:none;}
或者
a:hover{padding:0;}
又或者
a:hover{background: none;}

此时hover就好触发了。

23:原来IE6支持!important

.demo { color:#F00!important; color:#000; }/*IE6显示错误理解:.demo显示为黑色*/
/*如若下IE6是正确理解的:.demo显示为红色*/
.demo { color:#F00!important;}
.demo { color:#000; }

24:去掉button按钮左右点滴止的留白

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<style>
*{padding:0; margin:0}
input,button{overflow:visible;padding:0;}
</style>
</head>
<body>
<form id=”form1″ name=”form1″ method=”post” action=””>
<input type=”submit” name=”button” id=”button” value=”button按钮左右留白的缓解智” />
</form>
<button><span>button按钮左右留白的缓解方式</span></button>
</body>
</html>

25:中文字体在css中之写法

黑体SimHei\9ED1\4F53黑体

宋体SimSun\5B8B\4F53宋体
新宋体 NSimSun\65B0\5B8B\4F53新宋体

仿宋FangSong\4EFF\5B8B仿宋
楷体KaiTi\6977\4F53 楷体

微软恰恰黑体Microsoft JhengHei\5FAE\x8F6F\6B63\9ED1\4F53微软正黑体
微软生黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1稍微软雅黑

幼圆 YouYuan\5E7C\5706幼圆

26: ie6里width:100%凡是相对于上有可观设置的素 其他浏览器是相对于上单相对固定要切定位的要素

<div style=” width:600px; height:600px; background:#000;”>

<div style=” width:500px; height:500px; background:#333;”>

<div style=” float:left; background:#666; width:400px;” >

<div style=” width:300px; height:300px; background:#999;”>

<div style=” width:100%; height:100%; background:#f00; position:absolute; left:0; top:0;”>

于非ie6的浏览器被还是充满屏幕的吉, 说明非ie6的浏览器的width和height的百分比,都是相对的达标个相对固定要绝对定位的因素,没有就也html元素

,而ie6中之width和height 的比例,相对的凡高达个发大富显示设置的因素,而且height的比重设置失效,所以上述代码在ie6中尽管起大幅度穿越了他的父元素而遇见width:500px;的素的下,边把好安装成了width:500px;而height的装则失效, 这个, 让人口好蛋疼!ie6,真的该早点走了!

</div>

</div>

</div>

</div>

</div>

27: ie不缓存背景图片的解决办法

赛性能web开发被,一摆设小的图形请能望之就省,可IE6存在不缓存背景图的bug.如果重复使用了一个图片作为背景,那么每用平等软就是会见又去服务器拉一浅。。。给服务器带来巨大的下压力。解决智发生零星种,

1:采用JS

var ua = navigator.userAgent.toLowerCase();

var isIE6 = ua.indexOf(“msie 6”) > -1;//判断是否也IE6

// remove css image flicker

//IE6下默认不缓存背景图片,CSS里老是转图片的岗位时还见面另行发起呼吁,用这主意告诉IE6缓存背景图片

if(isIE6){

try{

document.execCommand(“BackgroundImageCache”, false, true);

}catch(e){}

}

2.于页面上直接以1单DIV元素来加载该图片,这样加载图片就会真被缓存,鼠标移动为未会见发送请求了。

28:ie6下css实现max/min-width/height

_width:expression(this.width>300?”300px”:ture); max-width:300px;

_height:expression(this.height>300?”300px”:ture); max-height:300px;

29:css空白外边距互相叠加的解决智

body{width:300px; font-family:’微软雅黑’; font-size:1em; text-indent:10px; line-height:1.25;}

div{background:#000;margin:10px;}

div p{background:#f60;margin:15px}

旋即是一个div元素内嵌套p的简易样例,先别复制保存也html测试,在您看了上面的代码后,你是不是认为其有为你表现如下图的法力?

哼,现在公可以复制上面代码,保存至本地,然后于浏览器中打开.你会好奇之意识,它呈现为你的功能是这么的:

怎会这样吗?按CSS中,对于来块级子元素的因素计算高度的法门,如果元素没有垂直边框以及填充,那其惊人就是其子元素顶部及底部边框边缘之间的距离.故,子元素的顶部和底空白边就突出到元素的外侧了.p元素的15px外地距同div元素的10px的外地距形成一个十足的15px笔直空白边,另外,形式之之拖欠白边并非为div所包围,而是表现于div的客围.所以,我们看出了亚摆效果图.
安解决?本人于推荐两种缓解方法:
其一,为外元素定义透明边框.具体到本例,即当样式div中进入border:1px solid #ddd;
彼,为外元素定义内边距填充..具体到本例,即于体制div中参加padding:1px
另外,还好透过外元素绝对定位,或者定义子元素浮动等方法实现.

30:纯css解决多履字垂直居中

<style type=”text/css”>

.alert{

width:400px;

height:250px;

display:table-cell;

vertical-align:middle;

line-height:1.5em;

border:1px solid red;

}

.alert_blank{

height:100%;

width:0;

display:inline;

vertical-align:middle;

zoom:1;

}

.alert_con{

width:100%;

zoom:1;

display:inline;

vertical-align:middle;

}

</style>

<div class=”alert”>

<div class=”alert_con”>哥乃多行文字垂直居中~哥乃多行文字垂直居中~哥乃多行文字垂直居中~哥乃多行文字垂直居中~</div>

</div>

彼大体原理也:第一个alert_blank容器,display:inline以后看成行内元素,它的万丈为100%,宽度却为0,相当给把外层容器左边框的一样久透明的线,这样就是让外层容器中独自在一行。外层容易的vertical-align:middle使得该内部相当给一行字垂直居中。真正盛放内容的div也是display:inline,它对外和blank垂直居中,只要其中文字不跳blank的可观,这个功能将凡无微不至的。虽然从语义化上谈,用空白div布局说不顶过去,但是缺点不掩瑜。另:zoom:1凡为着触发hasLayout。

31:关于flash遮盖div浮动层

(a) place Flash embed script in <div> container (I use SWFObject.js)[拿flash嵌入脚本放到一个div容器中]

(b) add wmode=transparent to Flash embed script[增加wmode=transparent 到flash嵌入脚本]

(c) set <div id=”flashcontent”> container with z-index:-1; [以外层容器的z-index设置也-1]

(d) set <body> tag with style .. position:relative;left:0px;top:0px;z-index:0;
(otherwise Firefox does not accept negative z-index)

(e) set floating iframe in container with z-index: 99;[拿转移的iframe在容器被之zindex设置也99]

(f) use CSS to position flashcontent and htmlcontent containers.[用css来调动flash容器和html容器的职位]

旁方案网上比多表现,不做阐述.在斯说生下第一单方案如何解决:

var so = new SWFObject(“XXX.swf”, “flashId”, “宽度”, “高度”, “版本”, “背景色”);

//设置flash不遮盖div层

so.addParam(“wmode”, “opaque”);

so.write(“flashcontent”);

这般设置即可为flash无法遮盖住div

32:如何处理ie6的契行高
ie6下汉字就是会显偏上位置,而当专业浏览器中莫在这题目字体 Tahoma,试下
然而要产生规定第一独字是用何的,那即便不得不忽略这个题材..我算是理解淘宝为啥把Tahoma字体放到第一号了

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns=”http://www.w3.org/1999/xhtml"&gt;

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>测试ie6的契行高表现</title>

<style type=”text/css”>

body,ul,li,p {margin:0;padding:0;}

body { font:12px/1.5  Tahoma,”宋体”,Arial, Helvetica, sans-serif; }

ul {float:left;list-style:none; margin-bottom:10px;}

ul li, p { margin-top:4px;background:silver;clear:left;}

ul li {float:left;margin-top:4px;}

</style>

</head>

<body>

<ul>

<li>岁月不饶人啦</li>

<li>hjgt</li>

</ul>

<p>岁月不饶人呀</p>

<p>hjgt</p>

</body>

</html>

33:利用 CSS 跨浏览器地躲藏文字一法

ont-size:0;        // for firefox & opera

color: transparent; // for webkit

overflow:hidden;    // for IE

font-size:0;

filter:alpha(opacity=0);

自测后相当的浏览器如下:

IE 6-8

Firefox 1-4

Opera 9-10

Safari 3-5

Chrome 1-6

34:button在chrome下默认有2px底margin

<button>在chrome下产生一定量如素margin</button>

35:ie6和ie7里面margin失效

<div style=”padding:20px;background:#f00;”>

<div style=”background:#fff;height:200px;margin:50px;”>我的margin在ie里面失效了</div>

解决办法去掉其中div的高度

 

转载自前端开发-武方博 的博客,原文链接http://www.wufangbo.com/ie6-ie7-ie8-css-bug-2/

相关文章