行内元素border-bottom在IE7下不生效
今天同事让我解决一个问题,就是他设置的span里面直接加border-bottom在IE7下不生效,经过各种demo的书写。终于找到了原理和方法。
一、为什么会出现这个问题
- 因为span标签是由文字撑开的,所有没有自身的高度,offsetHeight是内容撑开的高度,而在clientHeight中完全为0,这个可以看下面代码的输出。
- 是因为haslayout的问题吗?经过研究确实是,需要通过触发haslayout来让元素有高度,这样的话border就能出来了。
二、解决方法的研究
1.可以用css-hack来触发haslayout。代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border-bottom在ie7下不生效</title>
<style>
* {
margin: 0;
padding: 0;
}
#get-border {
width: 100px;
border-bottom: 2px solid #f00;
/*这个属性如果不设置的话下面的js中clientHeight将为0,意思就是说,默认的行内
是没有clientHeight这一说的,但是却有offsetHeight这一说,具体属性代表意思可以上mdn查询*/
*zoom: 1;
/*触发ie的haslayout*/
}
</style>
</head>
<body>
<span id="get-border">我的border会不会出现呢我的border会不会出现呢我的border会不会出现呢我的border会不会出现呢我的border会不会出现呢我的border</span>
<script>
//js只是用力看出行内元素如果不变成块级元素clientHeight为0
var oGetBorder = document.getElementById('get-border');
console.log('下面是行内元素span')
console.log('容器高度是' + oGetBorder.offsetHeight); //容器的高度是由内容撑开的高度,包括padding+height+border
console.log('padding+height的高度是' + oGetBorder.clientHeight); //返回的是作为block元素的高度,包括padding+height,如果是行内元素的基本上就是0,所以在ie下需要出发haslayout
var currentStyle = window.getComputedStyle ? window.getComputedStyle(oGetBorder, null) : oGetBorder.currentStyle;
console.log('字体的大小' + currentStyle.fontSize);
console.log('行高是' + currentStyle.lineHeight + '\n');
</script>
</body>
</html>
2.可以用一个其他元素来触发自身的haslayout(这个跟清除浮动的原理差不多),下面用的a+br标签进行触发,也可以直接用块级标签触发代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border-bottom在ie7下不生效</title>
<style>
* {
margin: 0;
padding: 0;
}
#get-border {
width: 100px;
border-bottom: 2px solid #f00;
}
</style>
</head>
<body>
<span id="get-border">我的border会不会出现呢我的border会不会出现呢我的border会不会出现呢我的border会不会出现呢我的border会不会出现呢我的border</span>
<br>
<a id="compare-2">
我的border会不会出现呢我的border会不会出现呢我的border会不会出现呢我的border会不会出现呢我的border会不会出现呢我的border
</a>
<script>
var oGetBorder = document.getElementById('get-border');
var oCompare2 = document.getElementById('compare-2');
console.log('下面是行内元素span')
console.log('容器高度是' + oGetBorder.offsetHeight); //容器的高度是由内容撑开的高度,包括padding+height+border
console.log('padding+height的高度是' + oGetBorder.clientHeight); //返回的是作为block元素的高度,包括padding+height,如果是行内元素的基本上就是0,所以在ie下需要出发haslayout
var currentStyle = window.getComputedStyle ? window.getComputedStyle(oGetBorder, null) : oGetBorder.currentStyle;
console.log('字体的大小' + currentStyle.fontSize);
console.log('行高是' + currentStyle.lineHeight + '\n');
console.log('下面行内元素a标签')
console.log('容器高度是' + oCompare2.offsetHeight); //容器的高度是由内容撑开的高度,包括padding+height+border
console.log('padding+height的高度是' + oCompare2.clientHeight); //返回的是作为block元素的高度,包括padding+height,如果是行内元素的基本上就是0,所以在ie下需要出发haslayout
var currentStyle2 = window.getComputedStyle ? window.getComputedStyle(oCompare2, null) : oCompare2.currentStyle;
console.log('字体的大小' + currentStyle2.fontSize);
console.log('行高是' + currentStyle2.lineHeight + '\n');
</script>
</body>
</html>
3.两个行内元素放在一起是不会触发haslayout的。如果两个行内元素放在一起的时候没有换行,就不会触发haslayout,但是如果换行就不一样了,就会触发了。
a.不能触发的两个span元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border-bottom在ie7下不生效</title>
<style>
* {
margin: 0;
padding: 0;
}
#get-border {
border-bottom: 2px solid #f00;
}
</style>
</head>
<body>
<span id="get-border">我的border会不会出现呢我的border会不会出现呢我的border会不会出现呢</span>
<span>我看看我可不可以触发haslayout,结果是不可以的</span>
<script>
var oGetBorder = document.getElementById('get-border');
var oCompare1 = document.getElementById('compare-1');
var oCompare2 = document.getElementById('compare-2');
console.log('下面是行内元素span')
console.log('容器高度是' + oGetBorder.offsetHeight); //容器的高度是由内容撑开的高度,包括padding+height+border
console.log('padding+height的高度是' + oGetBorder.clientHeight); //返回的是作为block元素的高度,包括padding+height,如果是行内元素的基本上就是0,所以在ie下需要出发haslayout
var currentStyle = window.getComputedStyle ? window.getComputedStyle(oGetBorder, null) : oGetBorder.currentStyle;
console.log('字体的大小' + currentStyle.fontSize);
console.log('行高是' + currentStyle.lineHeight + '\n');
</script>
</body>
</html>
b.如果两个span超长,就有可能触发haslayout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border-bottom在ie7下不生效</title>
<style>
* {
margin: 0;
padding: 0;
}
#get-border {
border-bottom: 2px solid #f00;
}
</style>
</head>
<body>
<span id="get-border">我的border会不会出现呢我的border会不会出现呢我的border会不会出现呢border会不会出现呢border会不会出现呢border会不会出现呢border会不会出现呢border会不会出现呢border会不会出现呢border会不会出现呢border会不会出现呢border会不会出现呢</span>
<span>我看看我可不可以触发haslayout,结果是不可以的</span>
<script>
var oGetBorder = document.getElementById('get-border');
var oCompare1 = document.getElementById('compare-1');
var oCompare2 = document.getElementById('compare-2');
console.log('下面是行内元素span')
console.log('容器高度是' + oGetBorder.offsetHeight); //容器的高度是由内容撑开的高度,包括padding+height+border
console.log('padding+height的高度是' + oGetBorder.clientHeight); //返回的是作为block元素的高度,包括padding+height,如果是行内元素的基本上就是0,所以在ie下需要出发haslayout
var currentStyle = window.getComputedStyle ? window.getComputedStyle(oGetBorder, null) : oGetBorder.currentStyle;
console.log('字体的大小' + currentStyle.fontSize);
console.log('行高是' + currentStyle.lineHeight + '\n');
</script>
</body>
</html>
三、小结
经过这一次对IE的haslayout的demo的书写,加深了对haslayout和行内样式还有一些offsetHeight和clientHeight的属性的理解。有不足之处希望各种给我提提意见,谢谢:)