css - Firefox 和 Chrome 的保证金值

Question

我有以下页面

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

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

是否有任何可用的修复程序。

Answer 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%;
}

Answer 2

Firefox 的保证金 css Hack

它适用于 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;
    }
}