iphone - CSS 标准浏览器与 iPhone 或移动设备 : two box models? 技巧示例

Question

这应该会引起 CSS 专家的兴趣。在这种情况下，我尝试了两种不同的盒模型支持行为:

一方面: 所有标准浏览器(IE、Chrome、Firefox、Opera 等，从 IE7+ 等，甚至适用于 iOS6+ 的 iPad 或 iPhone 的 Safari)

另一边: 一些移动浏览器(已在 iPhone/iPod 和 Samsung Galaxy Ace (Android) 设备上进行测试)。

这是 HTML

<div class="parent">
    <div class="floatright">Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent </div>
    <div class="nofloat">Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content </div>
</div>

CSS

.parent {
    background: yellow;
    width: 400px;
    height: 200px;
}
.nofloat {
    background: pink;
    float: none;
    margin-right: 20px;
    overflow:hidden;
}
.floatright {
    background: orange;
    float: right;
    width: 200px;
    margin: 0;
    padding: 0;
}

您可以在这里测试:http://jsfiddle.net/Kyk2P/1/

现在是故事:

在标准浏览器中，.nofloat 元素跨越其父元素的整个宽度，因为它不是 float 的。 .floatright 元素在其右侧“ float ”，因此将其内容推到左侧。属性 overflow: hide; 还有一个技巧:文本不会包裹 float 元素，而是保留在左侧的一列中。从技术上讲， float 元素仅推送 .nonfloat 容器的“内容”，而不是容器本身，这会产生以下结果:因此没有边距可见，因为它应用于 的右侧。 nofloat 容器实际上被 float 元素“覆盖”。这是人们所期望的正常结果。

在 iPod (iOS5) 或 Samsung Ace 设备上，结果有所不同。看起来 .nofloat 元素仅填充 .floatright 向右浮动后留空的父容器中的空间。结果:容器本身找到一个更窄的上下文，在 float 元素上应用其边距和楔形。在这种情况下，我们在内容(实际上是容器......)和 float 元素之间得到了一个边距。

图像胜于文字，以下是发生的情况:

我的问题是:

1. 这正常吗？
2. 应该如何表达 CSS 规则才能在两种情况下获得相同的结果(最好是情况 #1)？

--- 编辑 ---

感谢 Angelin，我现在知道搭载 iOS6 的 iPhone 获得了 Case#1。然而，装有以前的 iOS 和 Android 手机的 iPhone 确实会遇到情况#2。噩梦!

Answer 1

根据 CSS2.1 规范，这是一种未定义确切行为的情况。由于 .nofloat block 具有 overflow:hidden，因此它建立了新的 block 格式化上下文。规范says the following关于这种情况:

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

所以我相信这是正常的。这两种行为都不违反规范。虽然桌面和平板电脑浏览器倾向于使用尽可能多的水平空间，但移动浏览器倾向于使文本 block 更窄，以便更容易在小屏幕上阅读。我相信这种行为没有什么需要“修复”的，但如果您需要更一致的显示，您可以使用其他布局模型(例如 display: table-* 或 Flexbox)而不是 float 。