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

最新推荐文章于 2022-04-27 22:19:09 发布

简单的阿贵

最新推荐文章于 2022-04-27 22:19:09 发布

阅读量1.3k

点赞数

分类专栏： css 文章标签： ie 7 行内元素 border haslayout

本文链接：https://blog.csdn.net/qq814374557/article/details/75267956

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

行内元素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

收藏

觉得还不错? 一键收藏
0
评论
行内元素border-bottom在IE7下不生效

行内元素border-bottom在IE7下不生效今天同事让我解决一个问题，就是他设置的span里面直接加border-bottom在IE7下不生效，经过各种demo的书写。终于找到了原理和方法。
复制链接

扫一扫

专栏目录