jQuery寬度不包含內部元素填充

當元素包含內嵌填充塊的內嵌塊時，它不包含在元素的寬度計算中。jQuery寬度不包含內部元素填充

基本上與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>

來源

2014-03-13 user3338098

看看['box-sizing：border-box']（http://www.paulirish.com/2012/box-sizing-border-box-ftw/） – kei

該問題似乎特定於基於百分比填充。我認爲問題是如果考慮百分比填充，則嘗試和計算寬度將是一個無限循環。填充影響寬度，但寬度影響填充。 –

不是一個無限循環：parentWidth = totalChildFixedWidths /（1-totalChildPercentPadding），但是W3C決定宣佈常識實際上是未定義的行爲，而不是做明顯的事情...... – user3338098

由於這個問題只能用百分比填充時，您可以改用固定的像素填充和增加，隨着您的字體大小在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％，並且仍然適合父元素？

來源

2014-03-14 13:32:38

http://www.w3.org/ TR/CSS2/box.html＃padding-properties「如果包含塊的寬度取決於此元素，則結果佈局在CSS 2.1中未定義」 – user3338098

只要我看到關於'無限循環'的第一條評論，我就記得我在我開始上大學的時候，在2004年犯了這個錯誤，而後來我放棄了HTML + CSS + javaScript作爲一個笑話，現在它變得更好了，但是可惜它仍然是荒謬的玩笑。 – user3338098

jQuery寬度不包含內部元素填充

回答

相關問題