html – Chrome与大小调整:显示中的边框:表格

前端之家收集整理的这篇文章主要介绍了html – Chrome与大小调整:显示中的边框:表格前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用display:table做一个小的2窗格布局.对于间距(也来自背景图像),我使用填充.因为我需要孩子们有一个确切的宽度:50%来自可用空间(考虑到父div的填充),我使用Box-sizing:border-Box.

这在Opera中运行良好,但在Chrome中,框大小:border-Box或甚至-webkit-Box-sizing:border-Box会被忽略.

我做了一个演示,显示了这个问题.两个红色框应为方形,蓝色框的宽度和高度应为200px:http://jsfiddle.net/fabb/JKECK/

这是html源代码

  1. <div id="table">
  2. <div id="left">
  3. Something on the left side
  4. </div>
  5. <div id="right">
  6. Something on the right side
  7. </div>
  8. </div>

和CSS:

  1. #table {
  2. display: table;
  3. /*border-collapse: collapse;*/
  4.  
  5. width: 200px !important;
  6. height: 200px !important;
  7. Box-sizing: border-Box;
  8. -webkit-Box-sizing:border-Box;
  9. -moz-Box-sizing:border-Box;
  10.  
  11. margin: 0;
  12. border: 1px solid blue;
  13. padding: 60px 20px;
  14. }
  15.  
  16. #table #left,#table #right {
  17. display: table-cell;
  18.  
  19. width: 50%;
  20. Box-sizing: border-Box;
  21. -webkit-Box-sizing:border-Box;
  22. -moz-Box-sizing:border-Box;
  23.  
  24. margin: 0;
  25. border: 1px solid red;
  26. padding: 0;
  27. }

这是Chrome中的错误吗?或者我做错了什么?

解决方法

是的,Google Chrome bug:

Issue #103543 – CSS display: table bug

某些情况可以通过添加/删除填充的特定边来解决(如错误报告中的jsfiddle),但您的情况可能无法实现.

如果已知宽度和高度并且您需要方形单元格,则在那里使用浮动更容易且更稳定.

注意:由于表格布局能够打破指定的css宽度/高度,因此最好不要使用它,除非它是类似于表格的结构,或者你想要内容展开容器 – 所以你的宽度和宽度都很重要.身高不起作用.

猜你在找的HTML相关文章