显示不一致的行为：表和显示：table-cell在不同的浏览器 [英] Inconsistent behavior of display: table and display: table-cell in different browsers

问题描述

当在不同的浏览器中使用时， display：table 和 display：table-cell

---

环境

我在三种不同的环境：

环境1：

• 操作系统： Linux Ubuntu Desktop 14,64位


• 浏览器1：Chrome 45.0


• 浏览器2：Firefox 43.0






环境2：






• 操作系统：Windows 7， 64位


• 浏览器1：Chrome 48.0


• 浏览器2：Firefox 44.0






环境3：






• 操作系统：Windows 10 64位
• 
  
• 浏览器1：Chrome 51.0


• 浏览器2：Firefox 47.0






---





案例1 - display：table box-sizing：content-box





  .container {display：table; width：500px; height：150px; background：#ccf;} .content {color：＃000;高度：100％; padding：20px;背景：#ffc;}  

 < div class =容器> < div class =content> Lorem Ipsum< / div>< / div>  





FireFox，我得到以下输出：








在Chrome中，我得到以下输出：








另请参阅





在Chrome中，我得到以下输出：





。





---





案例3 - display：table-cell & box-sizing：content-box





  .container {display：table-cell; width：500px; height：150px; background：#ccf;} .content {color：＃000;高度：100％; padding：20px;背景：#ffc;}  

 < div class =容器> < div class =content> Lorem Ipsum< / div>< / div>  





FireFox，我得到以下输出：








在Chrome中，我得到以下输出：








另请参阅





在Chrome中，我得到以下输出：





。





---





我的问题：






• 这些规范定义了 display：table ， display：table-row 和 display：table -cell 应该彼此独立使用时的行为吗？如果是，这些是哪些是预期的行为？


• 这些浏览器的差异是否由Chrome的Firefox中的错误造成？


• 虽然这些浏览器差异仍然存在，但是在浏览器之间规范行为的策略应该是什么？考虑？ / everything_you_know_about_CSS_Is_wrong /rel =nofollow> 关于CSS的一切都是错误 ：

  
  

  CSS表愉快地遵守表布局的正常规则，
  启用了CSS表布局的一个非常强大的功能：缺少
  表元素是由浏览器匿名创建的。 CSS2.1
  规范规定：

  
  

  除HTML之外的文档语言可能不包含所有元素
  CSS 2.1表模型。在这些情况下，必须假设缺少元素
  ，以便表模型可以工作。任何表
  元素将自动地在其自身周围产生必要的匿名表对象
  ，由对应于table/inline-table元素的至少三个嵌套对象
  ，行
  元素和table-cell元素。

  
  

  这意味着如果我们使用 display：table-cell; 没有第一个
  包含块中的单元格设置为 display：table-row; ，行
  将被隐含 - 浏览器将执行，因为声明的行是
  实际存在。

  
  

  因此，规范明确允许使用 display：table-cell; 或 display：table;

  
  
  

  在这些情况下，我们仍然不清楚预期的行为是什么，但它似乎正在处理错误， 至少Chrome正在修复这些问题 。

  
  
  

  我给了 Oriol / a>这个答案的赏金，因为这是我所做的唯一的答案，实际上解决了我提出的观点，并提供了一些有价值的信息。

  
  

  When used on their own, display: table and display: table-cell behave differently in different browsers.

  ---

  Environment

  I did my testing in three different environments :

  Environment 1 :

  • OS : Linux Ubuntu Desktop 14, 64-bit
  • Browser 1 : Chrome 45.0
  • Browser 2 : Firefox 43.0

  Environment 2 :

  • OS : Windows 7, 64-bit
  • Browser 1 : Chrome 48.0
  • Browser 2 : Firefox 44.0

  Environment 3 :

  • OS : Windows 10, 64-bit
  • Browser 1 : Chrome 51.0
  • Browser 2 : Firefox 47.0

  ---

  Case 1 - display: table & box-sizing: content-box

  .container {
      display: table;
      width : 500px;
      height: 150px;
      background: #ccf;
  }
      
  .content {
      color: #000;
      height : 100%;
      padding: 20px;
      background: #ffc;
  }

  <div class="container">
      <div class="content">
          Lorem Ipsum
      </div>
  </div>

  In FireFox, I'm getting the following output :

  In Chrome, I'm getting the following output :

  See also this Fiddle.

  ---

  Case 2 - display: table & box-sizing: border-box

  .container {
      display: table;
      width : 500px;
      height: 150px;
      background: #ccf;
  }
      
  .content {
      color: #000;
      height : 100%;
      padding: 20px;
      -ms-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background: #ffc;
  }

  <div class="container">
      <div class="content">
          Lorem Ipsum
      </div>
  </div>

  In FireFox, I'm getting the following output :

  In Chrome, I'm getting the following output :

  See also this Fiddle.

  ---

  Case 3 - display: table-cell & box-sizing: content-box

  .container {
      display: table-cell;
      width : 500px;
      height: 150px;
      background: #ccf;
  }
      
  .content {
      color: #000;
      height : 100%;
      padding: 20px;
      background: #ffc;
  }

  <div class="container">
      <div class="content">
          Lorem Ipsum
      </div>
  </div>

  In FireFox, I'm getting the following output :

  In Chrome, I'm getting the following output :

  See also this Fiddle.

  ---

  Case 4 - display: table-cell & box-sizing: border-box

  .container {
      display: table-cell;
      width : 500px;
      height: 150px;
      background: #ccf;
  }
      
  .content {
      color: #000;
      height : 100%;
      padding: 20px;
      -ms-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background: #ffc;
  }

  <div class="container">
      <div class="content">
          Lorem Ipsum
      </div>
  </div>

  In FireFox, I'm getting the following output :

  In Chrome, I'm getting the following output :

  See also this Fiddle.

  ---

  My question(s) :

  • Do the specs define how display : table, display : table-row and display : table-cell should behave when used independently from each other? If yes, which of these is the expected behavior?
  • Are these browser differences caused by a bug in either Chrome of Firefox? And if these browser differences are caused by a bug, is the dev team of either browser trying to get this fixed?
  • While these browser differences persist, what strategies for normalizing behavior across browsers should I consider?

  解决方案

  From Everything You Know About CSS Is Wrong :

  CSS tables happily abide by the normal rules of table layout, which enables an ex­tremely powerful feature of CSS table layouts: missing table elements are created anonymously by the browser. The CSS2.1 specification states:

  Document languages other than HTML may not contain all the ele­ments in the CSS 2.1 table model. In these cases, the "missing" elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a "table"/"inline-table" element, a "table-row" element, and a "table-cell" element.

  What this means is that if we use display: table-cell; without first containing the cell in a block set to display: table-row;, the row will be implied—the browser will act as though the declared row is actually there.

  So, the specs explicitly allow the use of display: table-cell; or display: table; and define how elements should behave in that case.

  It remains unclear to me what's the expected behavior in each of these cases, but it does appears that we're dealing with bugs, and that at least Chrome is working on fixing them.

  I gave Oriol the bounty for this answer because it's the only answer I've had thusfar that actually addressed the points I raised and offered some valuable information.

  这篇关于显示不一致的行为：表和显示：table-cell在不同的浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！