css - 不同浏览器之间的滚动条不一致

Question

浏览器：http: //666kb.com/i/c6fufhslm58tzh66k.jpg 铬：http: //666kb.com/i/c6fufwh0ebfrcgwi4.jpg

php代码：

echo"<div id='anamain'>";
echo"<iframe frameborder=0 scrolling=yes width=100% height=100% src='duello.php'></iframe>";
echo"</div>";

CSS代码：

#anamain
{
    position:absolute;
    background-color:#f2f2f2;
    left:25%;
    top:205px;
    border-width:1px;
    width:50%;
    height:auto;
    color:#9db4bd;
}

我该如何解决这个差异问题？我想要 Chrome 视图的方式。

Answer 1

每个浏览器的页面元素默认状态略有不同。通常，使用“CSS 重置”来减轻这些差异。

查看http://www.cssreset.com/了解更多信息

话虽如此，重置样式表并不能解决所有差异。有些元素只是在不同的浏览器中表现不同，尤其是当您处理被称为 Internet Explorer 的那种疯狂的、吃孩子的越轨行为时。

了解这一点，出于您的目的，您可以使用 cssoverflow属性强制滚动条

#anamain
{
    /* ... previous styles ... */
    overflow: scroll;
    /* OR overflow: hidden; to hide */
    /* OR overflow-y: scroll; */
    /* OR overflow-x: scroll; */
}

针对您的问题，看起来您实际上需要将overflow样式应用于 iframe，而不是包含 div。我整理了一个样本：

http://jsfiddle.net/WqJYG/

如您所见，将overflow: hidden;样式应用于包装 div 和 iframe 可确保您不会获得任何滚动条。

文档

• overflow在 MDN - https://developer.mozilla.org/en-US/docs/CSS/overflow
• overflow-y- https://developer.mozilla.org/en-US/docs/CSS/overflow-y
• overflow-x- https://developer.mozilla.org/en-US/docs/CSS/overflow-x