这应该引起 CSS 专家的兴趣。这是我为盒子模型支持试验两种不同行为的情况：
一方面：所有标准浏览器（IE、Chrome、Firefox、Opera 等，来自 IE7+ 等，甚至是适用于 iPad 或 iOS6+ 的 iPhone 的 Safari）
另一方面：一些移动浏览器（经过测试的 iPhone/iPod 和三星 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元素跨越其父元素的整个宽度，因为它不是浮动的。元素浮动在其.floatright右侧“上方”，因此将其内容推向左侧。该属性overflow: hidden;还有一个技巧：不是让文本包裹浮动元素，而是留在左侧的一列中。从技术上讲，浮动元素仅推送容器的“内容” .nonfloat，而不是容器本身，这具有以下结果：因此没有可见边距，因为它应用于 .nofloat 容器的右侧，实际上被“覆盖”浮动元素。这是人们期望的正常结果。
在 iPod (iOS5) 或 Samsung Ace 设备上，结果是不同的。似乎 The元素仅填充了父容器中的空间，该空间在向右浮动.nofloat后为空。.floatright结果：容器本身找到了一个更窄的上下文，在该上下文中将其边距和楔形应用于浮动元素。在这种情况下，我们在内容（实际上是容器......）和浮动元素之间获得了一个边距。
图像比文字更好，这就是发生的事情：
我的问题是：
- 这是正常的吗？
- CSS 规则应该以什么方式表达，以便我们在两种情况下得到相同的结果（最好是案例 #1）？
- - 编辑 - -
感谢 Angelin，我现在知道带有 iOS6 的 iPhone 获得了 Case#1。但是，带有以前 iOS 和 Android 手机的 iPhone 确实得到了 case#2。恶梦！