Firefox 和 Chrome 的保证金值答案

【问题标题】：Margin value for Firefox and ChromeFirefox 和 Chrome 的保证金值
【发布时间】：2012-11-02 17:46:37
【问题描述】：

我有以下页面

http://www.javaexperience.com/java-externalizable-vs-serializable-interfaces/

最右边的提示部分在 Firefox 中运行良好，但在 Chrome 和 IE 中超出了可视区域。目前左边距值设置为 1290px。如果我将其更改为 1150 像素，那么它会在 Chrome 和 IE 中得到修复，但会导致 Firefox 渲染出现问题。

是否有任何可用的修复方法。

【问题讨论】：

#tips 不是 `#contents-b' 的孩子的任何原因？
没有特别的原因。将尝试将提示部分移动到侧边栏后的 contents-b 中，看看是否修复它。
+1 感谢它已通过将其添加到 contents-b 并相应地修复 CSS 来修复。

标签： css internet-explorer firefox google-chrome margin

【解决方案1】：

不要在<div id="tips"> 上提供较大的边距，而是将<div id="tips"> 附加到父容器，即<div id="contents-b">，并相应地调整同级容器的宽度。

所以，

<div id="contents-b">
    <div id="content-b">
        <!-- CONTENT -->
    </div>
    <div id="sidebar">
        <!-- sidebar CONTENT -->
    </div>
    <div id="tips">
        <!-- TIPS CONTENT -->
    </div>
</div>

还有类似的css

#contents-b {
    width:100%;
}

#content-b {
    display: inline-block;
    width:50%;
}
#sidebar {
    display: inline-block;
    width:30%;
}
#tips {
    display: inline-block;
    width:20%;
}

【讨论】：

【解决方案2】：

Margin css Hack for Firefox

它适用于 Chrome 和所有其他

 .inbox_notify span {
    background: #f30 none repeat scroll 0 0;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    line-height: 14px;
    margin: -33px 0px 0px 32px;
    padding: 2px;
    position: absolute;
    text-align: center;
    min-width: 17px
}

对于火狐

@-moz-document url-prefix() {
    .inbox_notify span {
        margin: -6px 0px 0px 0px;
    }
}

【讨论】：