我在使用Firefox添加不必要的滚动条时遇到问题(在Chrome和IE中可以正常工作)。
请参阅以下两个文件:page.html和iframe.html。
Page.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#myframe {
height: 550px;
overflow: auto;
width: 665px;
}
</style>
</head>
<body style="background-color:#dcdcdc;">
<iframe id="myframe" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" src="iframe.html" style="display: inline;">
</iframe>
</body>
</html>
Iframe.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
html {
direction: rtl;
}
</style>
</head>
<body>
<div style="width: 665px; height: 537px; background-color: blue;">
x
</div>
</body>
</html>
在firefox v30中,我总是显示垂直和水平滚动条。
iframe.html中内容的大小与iframe广告代码大小相同。
我将问题缩小为在iframe.html文件中使用direction:rtl标记。
当我添加direction:rtl时,我得到了滚动条并将其删除可解决此问题。
知道为什么吗?
如何在不使用iframe的情况下解决此问题而不使用scrolling =“ no”?
编辑:
我不认为添加overflow:hidden是解决方案,内容不应该“ overflow”-它的大小小于父对象。
我也想让内容溢出并在内容很长的情况下显示滚动条。
谢谢你的帮助 :)
最佳答案
更改:
<iframe id="myframe" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" src="iframe.html" style="display: inline;">
有了这个:
<iframe id="myframe" frameborder="0" marginwidth="0" marginheight="0" src="iframe.html" style="display: inline;">
在CSS规则的末尾添加add!important
<style type="text/css">
#myframe {
height: 550px;
overflow: hidden !important;
width: 665px;
}
</style>