发现是由于其低级成分ul的padding引 起,断断续续的在开发进度中募集了累累的

1:li边距“无故”增加

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下,假使要给成分定义百分之百冲天,必供给旗帜显明概念它的父级成分的冲天,假如你供给给成分定义满屏的万丈,就得
先给html和body定义height:100%;。

6:IE6躲猫猫bug
在IE6和IE7下,躲猫猫bug是二个卓殊讨厌的题材。3个撑破了容器的转移成分,假设在她事后有不成形的始末,并且有一
些定义了:hover的链接,当鼠标移到那几个链接上时,在IE6下就会触发躲猫猫。
焚林而猎办法极粗略:
1.在(那多少个未变动的)内容之后添加3个<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;时接触,大家本意是要做1个横向的列表(平时 是导航栏),
但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=”标题: 关于对笔者校二〇〇七年至二零零六年发展党职员和工人作境况进…
公布日期: 2010-5-31 16:05:08 类别:院务文告 点击: 139″>
[05-31]  关于对笔者校2005年至二零一零年发展党职员和工人作情况进…
</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: 如若总是太多,能够用外表链接 .中兴 文件。如,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 ( 推荐):大家只要给这些table1个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。

壹 、关于效果截图的些要求表达

上边包车型客车不是废话,是为着更易于的领会本人上面唾沫横飞的情节。

以下有所结果截图的大背景如下:
一 、页面上一定不动的,照猫画虎的,送豪华住房也不会从良的是2个赫色背景,折射率 4/10,大概满屏展现的层级为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的断然定位层之上。

二 、页面上做相比的是常娥图片,图片在半透明铅白相对定位层的地点依然下边很简单辨别,那样,您就能够对作者所说的z- index不起成效有很直观的认识了。

二 、IE6的埋怨:浮动让自家陷入
于今伊始真正的讲述 难点的产生,原因以及缓解了。首先讲讲第三种z-index无论设置多高都不起成效意况。这种境况发生的规则有八个:壹 、父标签 position属性为relative;贰 、难点标签无position属性(不蕴含static);叁 、难点标签包涵浮动(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的继母吧。

缓解格局,消除方法有三,壹 、position:relative改 为position:absolute;二 、去除浮动;叁 、浮动 成分添加position属性(如relative,absolute等)。

叁 、固执的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大多了,相对定位的父标签层级一千(一千0也一致),也比原野绿半透明层的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

前几日在做2个提姆eline的模块的时候遭受1个高难的标题: 给成分添加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-三个px,妨碍到鼠标hover状 态的事件。尝试修改doctype类型也有失效果。后来尝试了其它1个方式:

把原本的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:百分百是相持于上有中度设置的要素 别的浏览器是相对于上个相对固化或相对定位的成分

<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.假如重复使用了叁个图形作为背景,那么每用一遍就会再度去服务器拉2遍。。。给服务器带来巨大的压力。消除办法有三种,

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.在页面上直接动用二个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}

那是1个div成分内嵌套p的粗略样例,先别复制保存为html测试,在你看完上边包车型客车代码后,你是不是觉得它出为您表现如下图的效用?

好,以往您能够复制上面代码,保存到地点,然后在浏览器中打开.你会咋舌的发现,它显现给你的效益是那样的:

为什么会如此啊?按CSS中,对于有块级子成分的因素总计中度的措施,倘若元素没有垂直边框和填充,那其入骨正是其子成分顶部和尾部边框边缘之间的距离.故,子成分的顶部和底部空白边就杰出到成分的外面了.p成分的15px外市距与div成分的10px的异地距形成一个纯粹的15px垂直空白边,其它,方式的那个空白边并非为div所包围,而是表未来div的外围.所以,大家看看了第2张效果图.
什么样消除?自己相比推荐二种缓解方法:
本条,为外界元素定义透明边框.具体到本例,即在样式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未来同日而语行内成分,它的万丈为百分之百,宽度却为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嵌入脚本放到2个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,试下
而是借使有分明第①个字体是用吗的,这就不得不忽略那一个题材..笔者终于驾驭Tmall为何把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的冲天

别的工作都以有来头的,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下,假若要给成分定义百分之百高度,必供给鲜明定义它的父级成分的高度,假使您必要给成分定义满屏的莫斯中国科学技术大学学,就得
先给html和body定义height:100%;。

6:IE6躲猫猫bug
在IE6和IE7下,躲猫猫bug是三个要命讨厌的题材。叁个撑破了容器的变型成分,即便在他未来有不转变的始末,并且有一
些定义了:hover的链接,当鼠标移到这些链接上时,在IE6下就会触发躲猫猫。
消除措施非常粗略:
1.在(那贰个未变更的)内容之后添加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来化解这一个标题;其它2个办法就是触发<a>的hasLayout(如定 义高宽、
选取zoom:1;);也能够给<li> 定义display:inline;来解决此难题;此外还有二个极有意思的法门,给带有的文
内容尾添加贰个空格。

13: IE6调整窗口大小的 Bug
当把body居中放置,改变IE浏览器大小的时候,任何在body里面包车型地铁相持固化成分都会稳定不动了。消除办法:
给body定义position:relative;就行了。

14: 文本重复Bug
在IE6中,一些藏身的成分(如注释、display:none;的因素)被含有在2个变型成分里,就有恐怕引发文本重复bug。
化解办法:给浮动成分添加display:inline;。

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

什么也不说,先上个图

 

大家都精通,能够给链接a加上title属性,那样鼠标移动上去会呈现title属性定义的 文字,平常用来加一些提醒语句,

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

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

。在此之前一向从未仔细留意过这些东西。假若鼠标浮动上去要显得愈多东西的话,怎么落实吗。第① 反应是jquery的tooltip插件。前几天无意中发现有个别高校的网站鼠标移动上去能够体现那样完整的音讯,效果看起来就好像还是能够,就想看看怎么办的, 找了下,没察觉有Javascript脚本,再往链接的地方一看,终于让本人意识了路子了:

<a href=’#’ target=”_blank” title=”题目: 关于对作者校2007年至2010年发展党员工作情形进…
公布日期: 二〇〇八-5-31 16:05:08 体系:院务公告 点击: 139″>
[05-31]  关于对作者校二零零七年至二零一零年发展党职员和工人作情景进…
</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: 假设连接太多,能够用外表链接 .OPPO 文件。如,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。

壹 、关于效果截图的些须要表达

上面包车型客车不是废话,是为着更易于的明亮本人上面唾沫横飞的剧情。

以下有所结果截图的大背景如下:
一 、页面上固定不动的,一成不变的,送高档住房也不会从良的是2个深藕红背景,折射率 四成,差不多满屏显示的层级为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的断然定位层之上。

二 、页面上做相比的是月宫仙子图片,图片在半晶莹剔透黄色相对定位层的地方依然上面很简单辨别,那样,您就可见对本人所说的z- index不起作用有很直观的认识了。

二 、IE6的埋怨:浮动让作者陷入
明天起初确实的叙述 难题的产生,原因以及化解了。首先讲讲第二种z-index无论设置多高都不起功效意况。那种景况发生的准绳有四个:壹 、父标签 position属性为relative;二 、难题标签无position属性(不包涵static);三 、难题标签包涵浮动(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的继母吧。

不留余地办法,化解措施有三,① 、position:relative改 为position:absolute;二 、去除浮动;叁 、浮动 成分添加position属性(如relative,absolute等)。

③ 、固执的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大多了,绝对定位的父标签层级一千(一千0也同等),也比樱草黄半透明层的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-一个px,妨碍到鼠标hover状 态的轩然大波。尝试修改doctype类型也不见效果。后来尝试了其它2个措施:

把原本的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“> Tmall网 <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:百分之百是周旋于上有高度设置的成分 别的浏览器是相对于上个相对固定或相对定位的要素

<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.在页面上直接运用二个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}

那是3个div元素内嵌套p的回顾样例,先别复制保存为html测试,在你看完下边包车型大巴代码后,你是还是不是觉得它出为您表现如下图的法力?

好,以后您能够复制上面代码,保存到地头,然后在浏览器中打开.你会惊奇的意识,它表现给您的职能是那样的:

为何会这么啊?按CSS中,对于有块级子元素的成分计算高度的主意,即便成分没有垂直边框和填充,那其高度正是其子元素顶部和底部边框边缘之间的距离.故,子成分的顶部和底部空白边就优秀到成分的外侧了.p成分的15px外地距与div成分的10px的异乡距形成贰个十足的15px垂直空白边,其余,情势的这一个空白边并非为div所包围,而是表现在div的外围.所以,大家看来了第2张效果图.
怎么着缓解?本身相比推荐两种缓解办法:
本条,为外界成分定义透明边框.具体到本例,即在体制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>

其差不离原理为:第3个alert_blank容器,display:inline未来看作行内成分,它的可观为百分百,宽度却为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字体放到第4位了

<!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/

相关文章