草庐IT

关于 html:Chrome 与 box-sizing:border-box in a display:table

codeneng 2023-03-28 原文

Chrome vs. box-sizing:border-box in a display:table

我正在使用 display:table 做一个小的 2 窗格布局。对于间距(也来自背景图像)，我使用 padding。由于我需要孩子从可用空间中获得精确的 width:50%(考虑到父 div 的填充)，所以我使用 box-sizing:border-box.

这在 Opera 中运行良好，但在 Chrome 中，box-sizing:border-box 甚至 -webkit-box-sizing:border-box 会被默默忽略。

我做了一个演示来说明这个问题。两个红框应该是方形的，蓝框应该是宽高200px：http://jsfiddle.net/fabb/JKECK/

这里是html源代码：

1
2
3
4
        Something on the left side
       
   
        Something on the right side

还有css：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#table {
    display: table;
    /*border-collapse: collapse;*/

    width: 200px !important;
    height: 200px !important;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;

    margin: 0;
    border: 1px solid blue;
    padding: 60px 20px;
}

#table #left, #table #right {
    display: table-cell;

    width: 50%;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;

    margin: 0;
    border: 1px solid red;
    padding: 0;
}

这是 Chrome 中的错误吗？还是我做错了什么？

是的，谷歌浏览器错误：

问题 #103543 - CSS 显示：表格错误

某些情况可以通过添加/删除填充的特定侧来解决(例如错误报告中的 jsfiddle)，但您的情况可能无法解决。

如果宽度和高度已知并且您想要方形单元格，则在此处使用浮动会更容易和更稳定。

注意：
由于表格布局有能力破坏分配的 css width/height，最好不要使用它，除非它是类似表格的结构或者你想要内容扩展容器 - 所以你的 !important 在 width

  • 非常感谢您的留言 - 它帮助我找到了解决方法。我从 #table 中删除了 display:table，这使得我的布局可以在 Chrome、Opera 和 Firefox 中运行。幸运的是，有两个缺点不会影响我：1) 单个单元格不再跨越整个高度，2) 不应存在其他 display:table* ，因为它可能会干扰。您是否有任何其他信息，为什么具有 display: table 的元素可能会破坏 width 或 height 属性(在尝试其他解决方法时在 Opera 中遇到了这个问题)？
  • "Table width is breakable" 这是因为这是一种 inline-block 模型(历史原因-可能是人们更喜欢它可以根据内容扩展)，请参阅规范链接的链接。要解决此问题，您可以尝试 table-layout:fixed 链接以获得更多解决方案
  • p.s.如果您希望单元格跨越整个高度，请尝试 flexbox: webkit updated version 或 CSS3 flex box，支持的版本 --
  • flexbox 很好，谢谢你的提示！不幸的是没有歌剧支持：caniuse.com/#search=flexbox
  • 回滚了第 3 方编辑，该编辑通过删除关于其适用性的潜在重要限定符来改变帖子的含义。

n

box-sizingborder-boxspanclassnbspcssgoogle-chromehtml

有关关于 html:Chrome 与 box-sizing:border-box in a display:table的更多相关文章

  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 - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

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

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

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

  5. ruby-on-rails - Prawn PDF : I need to generate nested tables - 2

    我需要一个表，其中行实际上是2行表，一个嵌套表是..我怎样才能在Prawn中做到这一点？也许我需要延期..但哪一个？ 最佳答案 现在支持子表:Prawn::Document.generate("subtable.pdf")do|pdf|subtable=pdf.make_table([["sub"],["table"]])pdf.table([[subtable,"original"]])end 关于ruby-on-rails-PrawnPDF:Ineedtogeneratenested

  6. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  7. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  8. ruby - 如何使用 Nokogiri 解析纯 HTML 表格？ - 2

    我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

  9. ruby-on-rails - 连接字符串时如何在 <%=%> block 内输出 html_safe？ - 2

    考虑一下:现在这些情况:#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2我需要用其他字符串输出URL。我如何保证＆符号不会被转义？由于我无法控制的原因，我无法发送&。求助!把我的头发拉到这里:\编辑:为了澄清，我实际上有一个像这样的数组:@images=[{:id=>"fooid",:url=>"http://

  10. ruby - 下载位置 Selenium-webdriver Cucumber Chrome - 2

    我将Cucumber与Ruby结合使用。通过Selenium-Webdriver在Chrome中运行测试时，我想将下载位置更改为测试文件夹而不是用户下载文件夹。我当前的chrome驱动程序是这样设置的:Capybara.default_driver=:seleniumCapybara.register_driver:seleniumdo|app|Capybara::Selenium::Driver.new(app,:browser=>:chrome,desired_capabilities:{'chromeOptions'=>{'args'=>%w{window-size=1920,1

随机推荐