html – Safari的布局差异,边际右侧为负

概述我偶然发现Safari和Chrome / Firefox之间的布局渲染有所不同,我不知道哪一个是“正确的”. 你可以查看jsfiddle here 在Firefox / Chrome上,布局如预期,黄色div正好在红色之后.但在Safari上,黄色div位于红色下方. 在调查了我做错了什么后,我发现这个bug来自CSS类E,其属性margin-right(值：-11px)大于我的div的width 我偶然发现Safari和Chrome / firefox之间的布局渲染有所不同,我不知道哪一个是“正确的”.

你可以查看Jsfiddle here

在firefox / Chrome上,布局如预期,黄色div正好在红色之后.但在Safari上,黄色div位于红色下方.

在调查了我做错了什么后,我发现这个BUG来自CSS类E,其属性margin-right(值：-11px)大于我的div的wIDth属性(值：10px).

我想我明白为什么Safari以这种方式呈现它. B类的div宽度计算为其子节点宽度的总和,因为它们具有属性float：left;.

这里是wIDthB = wIDthB2 * 2 wIDthE marginRightE wIDthC或marginRightE< -wIDthE所以wIDthB不足以包含彼此相邻的每个div. 所以我的问题是：
>我对Safari的理解是否正确？
>为什么Chrome和firefox渲染方式不同？他们是不是根据负边际权利减少父div的宽度？
>在这种情况下,正确的修正总是会有一个小于或等于div的宽度的边距吗？

谢谢！

HTML：

<div >  <div >    <div >      <div ></div>      <div ></div>      <div ></div>      <div >        <div ></div>      </div>    </div>  </div></div>

CSS：

.A {  background-color: blue;  height: 200px;}.B {  height:100px;}.B2 {  background-color: red;  height: 100px;  wIDth: 100px;  float: left;}.C {  float: left;}.D {  height: 40px;  wIDth: 40px;  float:left;  background-color: yellow;}.E {  height: 50px;  wIDth: 10px;  position: relative;  left: -10px;  margin-right: -11px;  background-color: black;  float: left;}

解决方法 我不确定你对Js小提琴中的CSS有什么期望.您正在钻研未定义的行为.我这样说是因为：

>’C’浮动,但没有定义的宽度.这会导致各种浏览器出现问题,具体取决于布局的复杂程度.
>没有任何浮动元素被清除.浮动时,必须使用某些描述的明确修复,是否清楚：两者等.

如果您调整标记并添加清除修复,您会看到内容始终为239px.见http://jsfiddle.net/eaFn9/

然而,似乎相对定位的项目“E”和边距对宽度计算产生负面影响,因为Chrome的网络检查员似乎总是奇怪地报告此元素的负边距.

如果您在Web检查器中使用它,您可以看到它几乎就像负边距是跌落的原因.我认为这可能是由于容器没有宽度,并且本身不是相对位置的.

怎么修？

就个人而言,我想重新编写您的布局,以在所有浮动上包含固定宽度,减少浮动嵌套并尽可能清除.它似乎过于复杂但没有真实世界的用例,很难重写.

但是,在我看来,你可以将’B2”E’元素包装在一个浮动且相对定位的包装中,然后在’E’上使用绝对定位来产生相同的效果并消除负边距.

这是我提出的Jsfiddle：http://jsfiddle.net/jV3Ub/

总结

以上是内存溢出为你收集整理的html – Safari的布局差异,边际右侧为负全部内容，希望文章能够帮你解决html – Safari的布局差异,边际右侧为负所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。