行内元素border-bottom在IE7下不生效

来源：互联网发布：淘宝商家版登录编辑：程序博客网时间：2024/06/08 09:05

行内元素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的属性的理解。有不足之处希望各种给我提提意见，谢谢：）

阅读全文

0 0