html - 如何解决 Firefox 的宽度计算错误

标签 html css firefox svg

在某些情况下,Firefox 会严重错误地计算某些 DOM 元素的宽度,这反过来会导致布局中断。

jsFiddle举了一个问题的例子。表格下方显示的数字是深灰色阴影的 div 及其父级(由 jQuery 报告)的宽度(以像素为单位)。比较最新版本的 Firefox(或 IE 11)和 Chrome(或 Safari)产生的结果。 Chrome 始终报告两种宽度均为 250(如预期),但 Firefox 始终报告更大的数字(尽管确切数字可能取决于操作系统和/或 FF 版本和/或月相)。因此,没有足够的空间来呈现下一个 td 中的 svg 元素 3/row。

(更令人困惑的是:表格下方显示的数字将根据第二个 td 元素中包含的 svg 元素的 number 而有所不同.)

这种不稳定/不可预测的行为使得设计布局几乎不可能。

如何确保 FF 正确计算此类宽度,或者如何解决此错误?

编辑:更新了 jsFiddle(包括指向它的链接)。


现在,为了让 SO 的众神高兴:

body > div,table,table *{outline:1px solid red;}

html,body{height:100%;}
*{
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}
*{margin:0;padding:0;border:0;}
table{
  border-spacing:0;
  border-collapse:collapse;
}

body{
  font-family:courier;
  font-size:13px;
  background-color:palegoldenrod;
}

body > div{
  width:312px;
  margin:0 auto;
  padding:40px 0 0;
  background-color:white;
  min-height:100%;
}

label{
  display:block;
  padding:0 1ex;
}

.button-container{
  color:white;
  background-color:#555;
}
.button-container > div{
  display:inline-block;
}

.button-container > div:first-child{
  font-weight:bold;
}

.ul-container > div{
  width:100%;
  border:1px solid black;
  -webkit-border-radius:4px;
          border-radius:4px;
}
ul{list-style:none;}
li{
  width: 72px;
  float:left;
  margin: 0px 5px 1px;
  padding: 0px 5px;
  border-width: 1px;
  line-height: 14px;
}
br{
  clear:left;
}

body > div > div:last-child{margin:40px;}


<body>

  <div>

    <table><tbody><tr>
      <td>

         <div class="button-container">
           <div>xxxx xxxxx</div>
           <div>
             <label> <input type="radio"> xxxx xxxx xxx xxxx xxxx </label>
           </div>
         </div>

         <div class="ul-container" style="width: 250px;">
           <div style="width: 248px;">
             <ul style="width: 246px;">
               <li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li><li>H</li><li>I</li>
             </ul>
             <br>
           </div>
         </div>

      </td>

      <td>
        <div>
          <svg width="20" height="20"></svg><svg width="20" height="20"></svg><svg width="20" height="20"></svg><svg width="20" height="20"></svg><svg width="20" height="20"></svg><svg width="20" height="20"></svg><svg width="20" height="20"></svg>
        </div>
      </td>

    </tr></tbody></table>

    <div></div>

  </div>


(function ($) {
  var $msg = $('body > div > div:last-child');
  function showw (sel) {
    var w = $(sel).width();
    $('<span>', {text: '' + w})
        .css('margin-left', 5)
        .appendTo($msg);
    console.log(w);
  }
  showw('.button-container');
  showw('table td:first-child');
}(jQuery));

最佳答案

如果您删除 .button-container > divinline-block 规则,它会强制两个 div 位于不同的行上,从而允许表格一致的宽度。

发生的事情是浏览器试图将元素放在同一行。表格中没有明确宽度或溢出指令的单元格将变宽以容纳其中的内容行。因为这两个元素是内联的,所以它们被认为是一行。文本按照您的预期换行(浏览器在保护内容完整性方面做得很好),但就宽度计算而言,这是任意的;它影响元素形成的线条的计算宽度,因此将表格单元格打开得更宽。浏览器试图获取您提供的内容并理解它,同时它还试图保持数据的完整性和易读性,因为它是一个表格,而这就是表格的作用。

这是为什么表格不是布局的正确工具的另一个很好的例子。它们旨在容纳和呈现数据,因此它们可以很好地围绕文本流动和调整大小。不同的用户代理在如何实现这一点时有不同的策略——这都在规范中。当您滥用该元素时,您最终不得不应对不适合您的用例的设计属性。

fiddle :http://jsfiddle.net/Cy7dA/

关于html - 如何解决 Firefox 的宽度计算错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20342588/

相关文章:

android - React Native Android WebView 如何禁用水平滚动?

css - 将 src 图像隐藏在 <img> 元素中,但显示其背景图像

php - 让 Chrome 甚至在 500 或 404 代码上显示页面(表现得像 Firefox)

javascript - 如何减少 JavaScript 触摸输入的触摸延迟?

使用 webkit 转换的 HTML 到 PDF

javascript - 只从只有一个属性的对象中获取属性 JQuery

html - Firefox 模态 float 问题

javascript - 折叠一栏并自动调整另一栏

css - IE8 的样式问题

javascript - event.preventDefault() 在 Chrome 中有效,但在 Firefox/IE 中无效