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的Margin 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
}

对于FireFox

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

Firefox和Chrome的保证金价值

2 个答案: