草庐IT

html - 表格上的 Flexbox 在 Firefox 中不起作用

coder 2023-08-05 原文

使用 flexbox 控制表格的布局在 webkit 浏览器中有效，但在 Firefox 中有效，<td> s 只呈现与他们自己的内容一样宽。

示范: http://codepen.io/afraser/pen/wMgbzr?editors=010 

* {
  box-sizing: border-box;
}
table {
  border: 1px solid #ddd;
  width: 100%;
}
tbody {
  background: #fff;
}
tr {
  display: flex;
}
td:first-child {
  flex: 1 1 80%;
  background: mistyrose;
}
td:nth-child(2) {
  flex: 0 0 10%;
  background: Aquamarine;
}
td:nth-child(3) {
  flex: 0 0 10%;
  background: pink;
}
<table>
  <tbody>
    <tr>
      <td>Ted</td>
      <td>1</td>
      <td>100%</td>
    </tr>
    <tr>
      <td>Turd Ferguson</td>
      <td>2</td>
      <td>65%</td>
    </tr>
    <tr>
      <td>Hingle McKringleberry</td>
      <td>3</td>
      <td>99%</td>
    </tr>
  </tbody>
</table>

我尝试了几种变体，包括:

  • 使用 flex-grow , flex-shrink , 和 flex-basis单独。
  • 使用 flex-basis 的像素而不是百分比。
  • 使用 table-layout: fixed .

我在这里看不到任何记录:https://github.com/philipwalton/flexbugs并在其他地方干涸。有谁知道这是怎么回事吗？

最佳答案

那是因为，根据 CSS 表格，anonymous table objects当表格元素不是表格的子元素时应该生成:

根据Flexbox Last Call Working Draft , 正是那个匿名表格成为了 flex 元素，而不是表格单元格:

Some values of display trigger the creation of anonymous boxes around the original box. It’s the outermost box—the direct child of the flex container box—that becomes a flex item. For example, given two contiguous child elements with display: table-cell, the anonymous table wrapper box generated around them [CSS21] becomes the flex item.

由于表格单元格不是 flex 元素，因此它们忽略了 flex 属性。它适用于匿名表，但 CSS 选择器不能选择匿名元素。

但是，Chrome 不同意该规范，而是决定屏蔽表格单元格。

然后是CSS工作组decided标准化 Chrome 的行为:

If you have a flex container and you put two table cells in it, they won't become flex items independently. They'll wrap in an anonymous table and that will be flex.

However, Chrome had implemented it so that each item is independently a flex item. [...] So it turns the table cells into blocks.

I've seen at least one presentation at a conference where they took advantage of this to create fallback behavior for a flex. [...] If you're not trying to trigger fallback, I don't know why you'd put a bunch of table cells in flex and get it wrapped in anonymous stuff. [...]

RESOLVED: Just blockify the children of flex and grid containers. Don't do anonymous box fix-up

first Flexbox Candidate Recommendation以新决议发布:

Some values of display normally trigger the creation of anonymous boxes around the original box. If such a box is a flex item, it is blockified first, and so anonymous box creation will not happen. For example, two contiguous flex items with display: table-cell will become two separate display: block flex items, instead of being wrapped into a single anonymous table.

然后 Firefox 从版本 47 ( bug 1185140 ) 开始实现了新行为。

对于旧版本，您可以手动将单元格样式设置为 block :

.flex-container > td {
  display: block;
}


* {
  box-sizing: border-box;
}
table{
  border: 1px solid #ddd;
  width: 100%;
}
tbody {
  background: #fff;
}
tr {
  display: flex;
}
td {
  display: block;
}
td:first-child {
  flex: 1 1 80%;
  background: mistyrose;
}
td:nth-child(2){
  flex: 0 0 10%;
  background: Aquamarine;
}
td:nth-child(3){
  flex: 0 0 10%;
  background: pink;
}
<table>
  <tbody>
    <tr>
      <td>Ted</td>
      <td>1</td>
      <td>100%</td>
    </tr>
    <tr>
      <td>Turd Ferguson</td>
      <td>2</td>
      <td>65%</td>
     </tr>
    <tr>
      <td>Hingle McKringleberry</td>
      <td>3</td>
      <td>99%</td>
     </tr>
  </tbody>
</table>

关于html - 表格上的 Flexbox 在 Firefox 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34599876/

FlexboxFirefoxcodeflexnoreferrerhtmlcss

有关html - 表格上的 Flexbox 在 Firefox 中不起作用的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  3. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  4. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  5. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  6. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

  7. ruby-on-rails - openshift 上的 rails 控制台 - 2

    我将我的Rails应用程序部署到OpenShift，它运行良好，但我无法在生产服务器上运行“Rails控制台”。它给了我这个错误。我该如何解决这个问题？我尝试更新ruby​​gems，但它也给出了权限被拒绝的错误，我也无法做到。railsc错误:Warning:You'reusingRubygems1.8.24withSpring.UpgradetoatleastRubygems2.1.0andrun`gempristine--all`forbetterstartupperformance./opt/rh/ruby193/root/usr/share/rubygems/rubygems

  8. ruby - 无法在 60 秒内获得稳定的 Firefox 连接 (127.0.0.1 :7055) - 2

    我使用的是Firefox版本36.0.1和Selenium-Webdrivergem版本2.45.0。我能够创建Firefox实例，但无法使用脚本继续进行进一步的操作无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)错误。有人能帮帮我吗？ 最佳答案 我遇到了同样的问题。降级到firefoxv33后一切正常。您可以找到旧版本here 关于ruby-无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)，我们在StackOverflow上找到一个类

  9. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

  10. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

随机推荐