Question

IE：http://666kb.com/i/c6fufhslm58tzh66k.jpg Chrome：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的疯狂的，吃儿童的异常时。

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

#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 - 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

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

1 个答案: