您的位置：首页 > 其它

30个解决浏览器兼容性问题大全

2015-11-29 18:27 197 查看

## 兼容性问题一

### display:inline-block兼容问题

主要针对块级元素,行类元素无兼容问题

兼容性：

IE6、IE7不识别inline-block但可以触发块元素。

其它主流浏览器均支持inline-block。

解决IE6、IE7兼容性的方法：

1、首先设置inline-block触发块元素，具有了layout的特性，然后设置display:inline使块元素呈现内联元素，此时layout的特性不会消失。

2、直接设置display:inline，使用zoom:1触发layout。

兼容所有浏览器的方法是：

display:inline-block;

*display:inline;

*zoom:1;

## 兼容性问题二

### 兼容border

现象:具体的问题是这样子的：当父元素设置了padding属性后（即便属性值为0），该元素处在:hover状态时，元素底部边框无法显示，当设置outline属性后，边框宽度的第一个像素无法显示（看起来就像跟底部的outline互相抵消了）

<style>

body {

padding: 50px;

}

span a {

text-decoration: none;

font-size: 500%;

outline: 1px solid black;

}

#test2 a {

text-decoration: none;

font-size: 500%;

}

#test2 a:hover, span a:hover {

border-bottom: 1px solid black;

}

/*第一个链接元素设置了outline值

，当它处在:hover状态时，在IE8中看起来底部的outline不见了

。对于第二个链接元素，:hover状态下底部边框不见了。如果把边框值设置大一点

（比如说设置为5px），对于第二个链接，底部边框仍然无法显示，对于第一个链接元素，

底部边框实际值要比属性值小1px（即4px）。

经过测试，不只是border-bottom会有这个bug，border-top也会有边框消失的bug。*/

</style>

</head>

<body>

<div id="test"><span><a href="#">Hover over this</a></span></div>

<div id="test2" style="margin-top: 20px"><a href="#">Hover over this</a></div>

</body>

</html>

解决方式：修复bug的绝招就是对 a:hover { }设置{position: relative;}。注意：如果对非: hover状态设置{position: relative}（比如说这样子: a { position: relative; }），那么这个bug将依然存在

#test2 a:hover, span a:hover {

/*border-top:1px solid red;*/

border-bottom: 1px solid black;

position: relative;

}

## 兼容性问题三

1.ul标签在FF中默认只有padding值(即：padding-left:40px),而在IE中只默认有margin值（即：margin-left:40px）,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题。

2.一般都在总样式规定一下：

body,div,dl,dt,dd,ul

,ol,li,h1,h2,h3,h4,h5

,h6,pre,form,fieldset,input,textarea,p,

blockquote,th,td,img {

padding:0;margin:0;

}

代码：

<style>

.d1{

width:400px;

height:200px;

}

.d1 li{

float:left;

}

/*.d1 ul{

margin:0;

padding:0;

}*/

</style>

<div class="d1">

<ul>

<li>efref</li>

<li>erf</li>

<li>sfsfs</li>

</ul>

</div>

## 兼容性问题四

现象：

在一个div里面嵌入另一个div，给内部的div设置margin为负数，

结果在IE6里面会将超出边界的内容直接隐藏，其他浏览器则显示正常。

代码：

<style>

.abc{

width: 200px;

height: 30px;

margin:100px auto;

border: 1px solid #ffffff;

}

.aa{

width: 100px;

height: 20px;

border: 1px solid red;

/*问题描述

IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常。

造成的影响

严重的情况下会破坏整体布局。*/

margin: -10px;

}

</style>

</head>

<body>

<div class="abc">

<div class="aa">123456789</div>

</div>

解决方法：

在子元素内部设置：

*zoom:1;

*position: relative;

如下所示：

.aa{

/*首先需要保证容器在IE中触发 hasLayout 属性，可以通过zoom:1实现。*/

*zoom:1;

*position: relative;

}

## 兼容性问题五

　　 **去除链接虚线边框的问题**

　

　　　　当点击超链接后，ie6/7/8 ff会出现虚线边框 ,而opera、safari没有虚线边框

　　　**解决：**

　　　ie6/7中设置为：

　　　　　a { blr:expression(this.onFocus=this.blur()) }

　　　注意：ie8 和 ff 都不支持expression

　　　在ie8 、ff中设置为 :focus { outline: none; }

例子：

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style>

a {

blr:expression(this.onFocus=this.blur());

}

a:focus { outline: none; }

</style>

</head>

<body>

<a>测试数据</a>

</body>

</html>

　

## 兼容性问题六

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style>

div{

width: 100px;

height: 100px;

border: 1px solid red;

}

//添加以下内容解决

p{

margin: 0;

}

</style>

</head>

<body>

<div class="hear">

<p>aadadaa</p>

</div>

</body>

</html>

## 兼容性问题七

###ie6下元素浮动可能会导致垂直margin不会重叠####

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

<style>

#DIV1{

margin-bottom:50px;

}

#Float{

float:left;

width:100%;

}

#DIV2{

margin-top: 50px;

}

</style>

</head>

<body>

<div style="border:3px solid black; width:300px;">

<div id="DIV1">above</div>

<div id="Float">Float</div>

<div id="DIV2">below</div>

</div>

</body>

</html>

在现代浏览器和ie8+下，中间元素浮动脱离文档流，div1和div2在文档流中，垂直的上下margin会重叠，显示为正常的50px；在ie6上，中间浮动的元素由于跟父元素一样宽，会把上下元素分隔开，导致中间浮动的元素与上下元素分别有50px的margin，解决方法是在div2元素里面使用css hank技术解决，即：

#DIV2{

margin-top: 50px;

_margin-top: -50px;

}

在ie7下可能会有问题，所有把ie7加上，即：

#DIV2{

margin-top: 50px;

*margin-top: 0;

_margin-top: -50px;

}

加上以上代码即可解决当浮动元素有足够的宽度时会使垂直margin的重叠失效问题。

## 兼容性问题八

###IE6中浮动元素时绝对定位元素消失的情况 ####

代码如下：

<div class="father">

<div class="child1">我在定位</div>

<div class="child2">我在浮动</div>

</div>

<style>

.father{

width: 200px;

height: 200px;

border: 1px solid red;

position: relative;

}

.child1{

top:0;

left: 0;

position: absolute;

width: 100px;

height: 100px;

}

.child2{

float: left;

width: 200px;

height: 100px;

_display:inline;

}

</style>

在父级元素中存在一个定位元素和一个浮动元素时，当浮动元素的width大于父元素的width-3时，定位元素就会消失。

解决方法：

1.在定位元素外面套一个div;

2.在定位元素和浮动元素之间加一个空的div。

## 兼容性问题九

1.

随机写几个标签，不加样式控制的情况下，各自的margin和padding差异很大；在css里。

方案：css文件开头都用配符*开头设置；各个标签内外补丁。

2.

默认的图片有间距，几个img标签放在一起的时候，默认有间距，即使加上通配符也不起作用，

方案：使用float属性布局，img标签是行内元素，使用浮动会排成一行，只要不超出高度

//call，apply 继承

//用instanceof 验证一个对象是否真的继承，为true,或falus; call，apply为falus,原型链为trus;

//call,apply 当第一个参数作用不传参数时，指window对象；第二个值传参，则指向参数;

//call 第二个值用逗号分隔，apply只接收数组

// this用法

// 1、直接用方法调用this，所有的this指window对象；

// 2、产生对象方法，指前当前对象；

// 3、当对象方法还有内部函数时，this将重新指向window对象; 如

//原型链继承方法；

//将student的原型设置为prople对象;

Student.prototype=new People();

//studnt原型的构造方法还原成stdent；

Student.prototype.constructor=Student;

11.9

























## 兼容性问题十五

解决字母太长,固定宽高后,字母超出边框的问题

<style type="text/css">

/* 当div框固定高度宽度后，输入的文字超过div宽度，超出这个长度，不换行*/

div

{

width:300px;

/*word-wrap:break-word;*/

border:1px solid red;

}

</style>

</head>

<body>

<div>这是一串很长的代码aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

</div>

</body>

## 兼容性问题十六

#标准参考

根据 CSS2.1 规范中的描述，浮动元素将尽可能的向左或向右浮动，直到该元素的外边界碰到其包含块的边界或另一个浮动元素的外边界。

换句话说，当浮动元素的包含块能够在横向完全容纳该元素时，该元素不会再继续撑大其包含块。

##问题描述

在 IE6 IE7 IE8(Q) 中，一个右浮动元素将尽可能的向右布局，并撑大其所有宽度为 'auto' 的祖先级元素的宽度，直到遇到一个明确设定了宽度的祖先级元素为止。

注：这种现象仅在该元素有宽度为 shrink-to-fit 的的祖先级元素时才可以看到。

造成的影响

这个问题将导致一些元素在各浏览器中的实际尺寸或布局不一致。

受影响的浏览器

IE6 IE7 IE8(Q)

问题分析

分析以下代码：

<div id="Container" style="width:300px; position:relative;">

<div id="STF_1" style="height:50px; background:lightgrey; position:absolute;">

<div id="STF_2" style="float:left; height:40px; background:darkgray;">

<div id="Wrapper" style="border-top:10px solid dimgray;">

<div id="Right" style="float:right; width:100px; height:30px; background:url(x.gif);"></div>

</div>

</div>

</div>

</div>

Container 是容器，设置宽度为 300px 的目的是限制其内容的最大宽度。设置了 'position:relative' 是为了使其成为 STF_1 的包含块，以使 STF_1 的最大宽度也是 300px。

STF_1 是一个没有设置 'width'（默认值是 'auto'）、'left' 和 'right' 的绝对定位元素，因此它的宽度将是 shrink-to-fit。它的高度被设置为 50px，超出 Right 的高度以便观察其最终宽度。

STF_2 是一个没有设置 'width'（默认值是 'auto'）的左浮动元素，因此它的宽度也将是 shrink-to-fit。它的高度被设置为 40px，超出 Right 的高度以便观察其最终宽度。

Wrapper 的宽度为 'auto'，设置 border-top 以便于观察其最终宽度。

Right 是一个 100px * 30px 的右浮动元素，设置了一个网格状的图片背景。

根据 shrink-to-fit 的计算公式，可以计算出 STF_1 和 STF_2 的宽度均应该为 100px。

Wrapper 的宽度为 auto，它的宽度应该等于 STF_2 的宽度，也是 100px。

这段代码在不同的浏览器环境中表现如下：

Snapshot

删除 STF_1 和 Wrapper 后：

Snapshot

可见，在 IE6 IE7 IE8(Q) 中，第一张图中的 STF_1、STF_2 和 Wrapper，以及第二张图中的 STF_2 的最终宽度都是 300px，与预期的结果不符。Right 被尽可能的在最右侧被渲染，直到其所有宽度为 'auto' 的祖先级元素的宽度到达极限为止。

在其他浏览器中，第一张图中的 STF_1、STF_2 和 Wrapper，以及第二张图中的 STF_2 的最终宽度均为 100px，是正确的值。

这个差异是由 IE6 IE7 IE8(Q) 中布局右浮动元素时的 Bug 造成的。

#####注：如果受影响的元素的 'direction' 是 'rtl' ，情况又有不同，并且在 IE6 IE7(Q) IE8(Q) 中与 IE7(S) 中的表现也不相同。将 'direction' 设置为 'rtl' 的情况并不常见，因此本文不做分析。

该 Bug 将导致受影响的元素的宽度尽可能的大。

该 Bug 在 IE8(S) 中被修复。

如果一个页面在 IE6(S) IE7(S) 或 IE6(Q) IE7(Q) IE8(Q) 中被设计，并且触发了该 Bug，那么这个页面在其他浏览器中的布局将与预期的不符。部分内容将更加紧凑。

##解决方案

如果有一个右浮动元素，应注意避免其祖先级元素的宽度为 shrink-to-fit，即给它们设定一个明确的宽度。以使页面布局在各浏览器中的表现一致。

## 兼容性问题十七

input{

border:none;

...

}

兼容性问题：

在IE6.7里不支持border：none这个属性。

解决方法：1.把border：none改成border：0(border:0会占用内存，不建议使用)

2.给input标签设置一个背景属性可以解决

## 兼容性问题十八

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style>

table { border:5px solid #555; float:left; margin-right:10px; }

td { background:red; }

.table td { padding:20px; }

</style>

</head>

<body>

<table cellpadding="20" cellspacing="5">

<tr>

<td> </td>

</tr>

<tr>

<td></td>

</tr>

</table>

<table class="table" cellpadding="0" cellspacing="5">

<tr>

<td> </td>

</tr>

<tr>

<td></td>

</tr>

</table>

</body>

</html>

上面代码创建了两个 TABLE 元素，每个 TABLE 元素均包含两行一列，其中第一行中的

TD 元素是一个空单元格，第二行的包含 ' '。第一个 TABLE 元素设置了

cellpadding = "20"，而第二组则是为 TD 元素设置了 'padding:20px'。

根据 CSS 2.1 规范及 HTML 4.01 规范中对 TABLE 元素 'cellpadding' 属性的描述，

代码中所有的单元格都应该拥有边白。

## 兼容性问题十九

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>RE8014: IE6 IE7 IE8(Q) 中单元格对齐依据的是元素的原始宽度而不是其因某些原因被拉大后的宽度</title>













<style>

table { width:200px; border:1px solid black; }

td { width:100px; background:red; text-align:center; border:1px solid black; }

div { background:#ffff00; }

</style>

</head>

<body>

<table>

<tr>



<td style="width:100px;">

<div>auto</div>

</td>

</tr>

</table>

<table>

<tr>

<td>



<div>1</div>

</td>

<td>

<div>auto</div>

</td>

<td>



<div>2</div>

</td>

</tr>

</table>















</body>

</html>

<script src="JS/jquery-1.11.3.min.js"></script>

## 兼容性问题二十

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

<style>

*{margin: 0;padding: 0;}

.wrap{width: 600px;height: 600px;margin: 0 200px;background: blue;}

.inner{width: 200px;height: 200px;float: left;background: red;}

p{font-size: 20px;color: white;line-height: 25px;}

/*第一种解决方法*/

/**p{font-size: 20px;color: white;float: right;margin-left: 0;}*/

/*针对IE6及其以下版本采用如下样式声明消除BUG*/

/*第二种方法*/

/**html p{margin-left: 0;height: 1%;}*/

*html .inner{margin-right: -3px;}

</style>

</head>

<body>

<div class="wrap">

<div class="inner"></div>

<p>3px文本偏移BUG：IE6及其以下版本。当文本与一个浮动元素相邻时表现出来。

3px文本偏移BUG：IE6及其以下版本。当文本与一个浮动元素相邻时表现出来。

3px文本偏移BUG：IE6及其以下版本。当文本与一个浮动元素相邻时表现出来。

3px文本偏移BUG：IE6及其以下版本。当文本与一个浮动元素相邻时表现出来。

3px文本偏移BUG：IE6及其以下版本。当文本与一个浮动元素相邻时表现出来。

3px文本偏移BUG：IE6及其以下版本。当文本与一个浮动元素相邻时表现出来。

</p>

</div>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

<style>

*{

margin:0;

padding:0;

}

#box {

background:#eee;

border:1px solid #333;

position:relative;

text-align:right;

left: 200px;

}

#smallbox {

background:#009999;

width:200px;

height:20px;

position:absolute;

left:0;

top:0;

}

/**html #box{height: 1%;}*/

</style>

</head>

<body>

<div id="box">

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<div id="smallbox"></div>

</div>

</body>

</html>

## 兼容性问题二十一

### haslayout clear的兼容性

问题描述: 在IE中触发haslayout,并设置clear来清除浮动,在某些情况下,IE中的布局会出现一些问题

案例:

<style>

.inner{

width:100px;

background:#CCC;

border:5px solid black;

padding-top:10px;

overflow: hidden;

zoom: 1;

}

.float{

float:left;

width:50px;

height:50px;

background:#666;

}

</style>

<body>

<div class="inner">



<div class="float">FLOAT</div>





<div class="float">FLOAT</div>



</div>

</body>

结果:

chorme,IE8: 第一个div的上部跟inner有10px的距离;

IE6,IE7: 第一个div的上部跟inner有10px的距离;

第二个div的上部跟第一个div有10px的距离,

底部跟inner的底部有10px的距离.

那么问题来了:

基于W3C的规范,chorme和IE8所展示的结果是符合规范的,

但IE6,IE7就会在第二个div的上部和下部多出两个10px的空白,

怎么解决这个问题呢?

解决方案：

其实上面问题的出现，是因为在IE中同时使用haslayout和clear就会出现

一些问题,但是出现这个问题的原因我们不知道,因为IE6,IE7本来就是不遵循

W3C规范的;那么我们可以不给inner设置宽度,因为在IE中设置宽度就会触发

haslayout,但这时候inner不给宽度的话,那么宽度就会自动填充为100%;

那我们可以就在inner的外面在包裹一个div用来设置宽度,这样就即设置了

宽度,又没有触发haslayout就可以解决问题,达到我们想要的结果了

代码示例：

<style>

.wrap{

width: 100px;

}

.inner{

/*width:100px;*/

background:#CCC;

border:5px solid black;

padding-top:10px;

}

.float{

float:left;

width:50px;

height:50px;

background:#666;

}

</style>

<div class="wrap">

<div class="inner">



<div class="float">FLOAT</div>

<div style=" background:#999;"></div>



<div class="float">FLOAT</div>

<div style="clear:left; background:#999;"></div>

</div>

</div>

## 兼容性问题二十二

### 解决IE6,7用height设置select高度无效的兼容性 #

<select>

<option selected="selected">水果</option>

<option>苹果</option>

<option>橘子</option>

<option>葡萄</option>

<option>桃子</option>

</select>

<style>

select{

width:100px;

height:40px;

}

</style>

运行上面的代码会发现在IE6,7下高度不变.

解决方法:在select外嵌套两层标签，一层用来遮挡select的默认边框(在IE6、7中设置border:0px也是无效的)，

另一层用来模拟”高度改变后的“select边框)

代码:

<div class="standard_select">



<div class="select_shelter">



<select>

<option selected="selected">水果</option>

<option>苹果</option>

<option>橘子</option>

<option>葡萄</option>

<option>桃子</option>

</select>

</div>

</div>

.standard_select{ /*边框*/

display:inline-block;

*display:inline;

zoom:1;

border:solid 1px black;

padding:5px; /*调整此处改变select高度*/

*padding:7px;

}

.select_shelter{ /*遮挡默认边框*/

display:inline-block;

*display:inline;

zoom:1;

width:100px;

*width:98px;

height:20px;

overflow:hidden;

}

select{

*margin:-1px;

padding:3px;

border:0px;/*遮挡现代浏览器的select边框*/

width:100px;

}

## 兼容性问题二十三

### IE输入框，字体不能居中

<style>

input{

height: 50px;

text-align: center;

background: red;

}

</style>

</head>

<body>

</body>

</html>

IE下输入框里的字体不能垂直，水平居中，需要加入line-height: 50px;，可解决

### img下有空白

/*解决： 1.将图片转换成块级元素 display: block;

//*设置图片的垂直对齐方式*/

/*2.img { vertical-align:top/bottom/middle; }*

/*3、设置父对象的文字大小为0px font-size:0;*/

/*　4、父对象有宽高改变父对象的属性 overflow:hidden;*/

## 兼容性问题二十四

### input和按钮对齐的兼容性

首先在body里面有两个input，给了个名字#textfiled，要style里面的样式要相同，在它的里面设置了框框为黑色，给text一个浮动float：left；overflow：hidden就能对齐了，button的高度和tetxt的高度相同一致，button里面的margin-left：19px是 button和text之间的距离为19px；像素。

button的高也为40px；

## 兼容性问题二十五

### 固定定位的兼容性

<style>

body{

margin: 0;

padding: 0;

}

.d1{

height: 1000px;

width: 100%;

border: 1px solid #ff0000;

}

.d2{

width: 200px;

height: 200px;

position: fixed;

top: 200px;

left: 100px;

}

</style>

</head>

<body>

<div class="d1">普通元素</div>

<div class="d2">固定定位的元素</div>

</body>

问题1的描述：在IE6中定不了位，IE6会把“position: fixed;”当作position的默认值；所以“.d2”会以此排在“.d1”的下方。

问题1解决办法：在“.d2”设置：

.d2{width: 200px;

height: 200px;

position: fixed;

_position: absolute;

top: 200px;

left: 100px;

_margin-top: 200px;

_margin-left: 100px;

/*滚动条与滚动条顶部的距离，兼容IE6写法，因为IE6不支持position:fixed*/

_top:expression(offsetParent.scrollTop);

_left:expression(offsetParent.scrollLeft);}

问题2的描述：在IE6的状态下，会出现抖动的效果，造成抖动的原因是：滚动条在移动时，X,Y在不断的变化，页面就会不断的刷新，就会看见固定的元素在抖动

问题2的解决办法：

（1）种:使用background-attachment:fixed为body或html元素添加一个background-image。图片可以为不真实存在的

body{

margin: 0;

padding: 0;

background-image:url(about:blank);

/*或图片真实存在的：background-image:url("social_n.png");*/

background-attachment:fixed;

}

（2）种：在html添加：text-overflow:ellipsis;

html{text-overflow:ellipsis;}

## 兼容性问题二十六

### z-index

如果想让z-index大的在z-index小的的面，"有时候"在IE 对你想操作的对象用此方法（大z-index>小z-index）不行；此时可以对他们的父级元素用此方法

## 兼容性问题二十七

### border-radius兼容：

1.引入(ie-css3.htc)的文件

2.behavior: url(ie-css3.htc);(调用方法)；

.box {

width: 90px;

height: 90px;

position: relative;

z-index: 1;

border: 1px solid red;

background: white\9;

-moz-border-radius: 15px; /* Firefox */

-webkit-border-radius: 15px; /* Safari 和 Chrome */

border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */

}

优缺点：

1.解决IE border中块级元素兼容问题；不用导入图片那么麻烦做圆角(优点)；

2.border-radius属性默认background：#FFFFFF，不支持透明色(缺点)。

3.button或者input[type=”button”],input[type=”submit”]的时候，就不能用这个，只能用作于div和部分display:block;的元素。比方说像button，display:block;就不行(缺点)；

综上所述；用behavior: url(ie-css3.htc)解决圆角兼容，优缺点并存，并不是非常完美的解决方案，什么情况下使用该方法什么时候用背景解决就要视情况而定。不管怎样多了解一种方法对于我们解决兼容也是一种累积。

## 兼容性问题二十八

### IE6 min-height兼容性问题

!--标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,

那我又想固定高度，又想能被撑开需要怎样设置呢？<br>

办法就是去掉height设置min-height:200px;<br>

这里为了照顾不认识min-height的IE6 可以这样定义：<br> height:auto!important;height: 200px;

min-height:200px;

这样就完美解决了IE6不兼容min-height；同理此方法也适用于min-weight。

--

以下为测试代码：

<style>

div{

width: 300px;;border: 2px solid orange;

/*min-height: 200px;*/

height:auto!important;

height: 200px;

min-height:200px;

float: left;

}

</style>

<body>

<div id="d1">

<p>test</p>

<p>test</p>



















</div>

<label for="test"></label><input type="text" id="test" value="输入测试内容"/>

<input type="button" id="btn" value="新增"/>

</body>

<script src="js/jquery-1.11.3.min.js"></script>

</html>

<script type="text/javascript">

$("#btn").click(function(){

// $("#d1").css("color","red")

$("#d1").append($("#test").val()+"<br>"+"<br>")

});

</script>

## 兼容性问题二十九

####问题描述

IE6 IE7 IE8(Q) 中 cellspacing 属性在重合的边框模型的表格中仍然有效。

####造成的影响

若同时使用 cellspacing 属性及 bordercollapse:collapse，将会导致表格的边框在不同浏览器中产生差异。

> border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

####chorm浏览器下的样式

<table cellspacing="10" style="border-collapse:collapse;background:wheat;border:5px solid brown;font:20px 'Trebuchet MS';">

<tr>

<td style=" background:lightcyan;border:5px solid navy;">TD</td>

<td style=" background:lightcyan;border:5px solid navy;">TD</td>

</tr>

<tr>

<td style=" background:lightcyan;border:5px solid navy;">TD</td>

<td style=" background:lightcyan;border:5px solid navy;">TD</td>

</tr>

</table>

####IE6,7下的样式

<table cellspacing="10" style="border-background:wheat;border:5px solid brown;font:20px 'Trebuchet MS';">

<tr>

<td style=" background:lightcyan;border:5px solid navy;">TD</td>

<td style=" background:lightcyan;border:5px solid navy;">TD</td>

</tr>

<tr>

<td style=" background:lightcyan;border:5px solid navy;">TD</td>

<td style=" background:lightcyan;border:5px solid navy;">TD</td>

</tr>

</table>

####解决方法

table标签内 cellspaceing的值设置为"0"

<table cellspacing="0" style="border-collapse:collapse;background:wheat;border:5px solid brown;font:20px 'Trebuchet MS';">

<tr>

<td style=" background:lightcyan;border:5px solid navy;">TD</td>

<td style=" background:lightcyan;border:5px solid navy;">TD</td>

</tr>

<tr>

<td style=" background:lightcyan;border:5px solid navy;">TD</td>

<td style=" background:lightcyan;border:5px solid navy;">TD</td>

</tr>

</table>

## 兼容性问题三十

### IE6文字line-height失效

当一个容器里的文字与img、input、textarea、select、object等元素相连时，对这个容器设置的line-height数值就会失效，同时以上元素的行高可能×2，受影响的浏览器：ie6.0

解决方法是对与文字相连接的img、input、textarea、select、object等元素加以属性line-height

1. margin:(所属line-height减去自身img,input,select,object高度)/2 px 0

2. vertical-align:middle

具体代码：

<style type="text/css">

.dv{

width: 300px;

height: 100px;

background: green;

line-height: 100px;

}

input{

height: 30px;

( margin: 35px 0;

vertical-align: middle;) 解决的方法

}

</style>

</head>

<body>

<div class="dv">

<span>ppp</span>

<input type="text"/>

</div>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航