Question

当一个元素包含包含填充的内联块时，它不会包含在元素的宽度计算中。

基本上与jQuery outerWidth on a parent element which has child elements with padding相同。

此页面应该有绿色框右侧的文字，但是文本总是会比它的容器大，因为宽度从不包括任何一个孩子的填充。

有没有办法正确找到元素的宽度而无需手动枚举所有子元素并重新添加每个子元素的填充？使用.css('width')，.width()或.outerWidth()时，结果相同。

<html>
<head>
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <script>
    jQuery(document).ready(function() {
      var e = jQuery('#BLAH');
      var pw = e.parent().width();
      e.css('font-size','1px');
      if (e.outerWidth() < pw) {
        while ( e.outerWidth() < pw) {
          alert('width ' + e.outerWidth() + ' < ' + pw);
          e.css('font-size','+=1px');
        }
        e.css('font-size','-=1px');
      }
    });
  </script>
  <style>
    #BLAH {
      background-color: red;
      white-space: nowrap;
    }
    .BLAH {
      //padding: 0 10%;
      background-color: blue;
      display: inline;
    }
  </style>
</head>
<body>
    <div style="background-color: green; width: 50%; height: 50%">
      <div id="BLAH" style="display: inline-block;">
        <div class="BLAH">BLAH</div>
        <div class="BLAH">BLAH</div>
        <div class="BLAH">BLAH</div>
        <div class="BLAH">BLAH</div>
      </div>
    </div>
</body>
</html>

Answer 1

由于问题只发生在百分比填充上，您可以改为使用固定像素填充，并在javascript中将其与字体大小一起增加。像这样：

jQuery(document).ready(function () {
    var e = jQuery('#BLAH');
    var pw = e.parent().width();
    e.css('font-size', '1px');
    if (e.outerWidth() < pw) {
        while (e.outerWidth() < pw) {
            console.log('width ' + e.outerWidth() + ' < ' + pw);
            e.css('font-size', '+=1px');

            jQuery(".BLAH").css({
                'padding-right': '+=1px',
                'padding-left': '+=1px'
            });
        }

        e.css('font-size', '-=1px');

        jQuery(".BLAH").css({
            'padding-right': '-=1px',
            'padding-left': '-=1px'
        });
    }
});

http://jsfiddle.net/5Gufk/

如果你想要更复杂，你可以将填充量计算为父元素之前宽度的百分比并应用它而不是仅增加一个或任何其他公式。

至于为什么它以这种方式工作，我无法找到定义此行为的CSS规范的一部分。但是，重要的是要了解百分比填充是基于包含块的宽度。考虑一下，如果你有6个元素，两边都有10％的填充，它会如何工作。那将是120％的填充，如果元素的填充为120％的父元素的宽度并且仍然适合父元素，那怎么可能呢？

jQuery宽度不包括内部元素填充

1 个答案: