Webkit 中的 CSS -moz-available 等价物？答案

【问题标题】：CSS -moz-available equivalent in Webkit?Webkit 中的 CSS -moz-available 等价物？
【发布时间】：2011-03-23 23:20:15
【问题描述】：

-moz-available 在 Webkit 中的等效项？

【问题讨论】：

我建议您在 Google 上快速搜索此类问题。
@poepje 在提出这个问题时根本没有很好的搜索结果。请查看所选答案。我相信这个问题多年来的历史可以帮助一些人。
@paddotk 尝试在 google 中搜索 -moz-available。或在任何其他搜索引擎中。甚至 stackoverflow 的搜索引擎也给出了不相关的结果。我不得不开始写一个问题，然后从提议的列表中选择一些主题。

标签： css webkit

【解决方案1】：

它现在在 WebKit 中被支持为 width:-webkit-fill-available，在 CSS Intrinsic & Extrinsic Sizing Module Level 3 (http://www.w3.org/TR/2012/WD-css3-sizing-20120927/#width-height-keywords) 中定义。

与 Gecko 不同，Gecko 基于 CSS 基本框模型 (http://dev.w3.org/csswg/css-box/#the-width-and-height-properties) 实现 width:-moz-available。

请注意，这两个值是用不同的术语定义的；它们在极端情况下的作用可能不同。此外，在 CSS Intrinsic & Extrinsic Sizing Module Level 3 的编辑草稿（2013 年 10 月 11 日）中，fill-available 现在指定为fill。

【讨论】：

【解决方案2】：

这在 Chrome 中对我有用：

box-sizing: border-box;

【讨论】：

【解决方案3】：

一旦实现（或准备好），您就可以使用

please-use-available-width

但现在使用

-webkit-please-use-available-width

PS。这是个笑话

对于这个非常重要的问题没有 webkit 解决方案。重要性在于，内容很少的浮动内容 DIV 将被调整为该内容的宽度。这会破坏页面。

浮动内容 DIV 用于将内容放在菜单之前，这是一个可访问性编译指示。我们只能希望这个值被纳入下一个 CSS 规范。

保持你的手指交叉:-)

【讨论】：