Question

http://ikigoz.5u.com/_template_a2/index.html

上面的链接是我以前的网页模板在Chrome中运行=导致没有问题
在Firefox中运行=在页面下方产生较小的空白区域在IE中运行=在页面下方产生更大的空白区域

问题：如何摆脱IE和Firefox中出现的空白区域？

通过滚动页面并滚动iframe左侧边栏可以观察到问题。（可以在不制作任何卷轴的情况下观察到）虽然页面没有在那里结束，但在文档的当前查看部分下面会有一个空格。

注意：忽略由iframe尺寸和滚动条禁用代码导致的跨浏览器兼容性导致的视觉问题。还要忽略标记错误（目前已修复并且似乎与问题无关）。此外，由于声誉要求，我无法提供屏幕截图。

代码如下：

<!DOCTYPE html>
<html>
<head>
<title>İki Göz</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

<script type="text/javascript">
function stop()
{
return false;
}
document.onmousewheel=stop;
</script>

<style>

html {
generic-family:serif;
font-family:georgia;
}

html::-webkit-scrollbar {  
display:none;
}

#sidebar {
border-style:none;
margin-left:-8px;
}

#content {
border-style:none;
margin-left:-8px;
}

iframe::-webkit-scrollbar {  
display:none;
float:left;
}


header {
background-color:#EEEEEE;
padding-top:10px;
padding-bottom:8px;
margin-top:-8px;
}

nav {
color:#CCCCCC;
background-color:#303030;
padding-top:8px;
padding-bottom:8px;
margin-left:-8px;
margin-right:-8px;
}

#maintitle {
color:#BB0000;
font-size:30px;
font-weight:normal;
}

#maintitle span{
color:#111111;
font-size:24px;
font-weight:normal;
margin-left:5px;
}

a {
-webkit-transition:color 300ms linear;
-moz-transition:color 300ms linear;
-o-transition:color 300ms linear;
-ms-transition:color 300ms linear;
transition:color 300ms linear;
}

a:link {color:#EEEEEE;text-decoration:none;}
a:visited {color:#CCCCCC;text-decoration:none;}
a:hover {
color:#FFFFFF;text-decoration:underline;
-webkit-transition:color 300ms linear;
-moz-transition:color 300ms linear;
-o-transition:color 300ms linear;
-ms-transition:color 300ms linear;
transition:color 300ms linear;
}
a:active {color:#FFFFFF;text-decoration:underline;}

</style>

</head>
<body>
<header id="maintitle">İki Göz:<span>Yaşanmışlıklar, tespitler ve hikayelerle hayatın içinden...
</header>


<nav>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="index.html"">Anasayfa</a>
&nbsp;&nbsp;&nbsp;
|
&nbsp;&nbsp;&nbsp;
<a href="sidebar.html" target="iframe1">Tüm Yazarlar</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="sidebar_yurdupak.html" target="iframe1">Onur YURDUPAK</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="sidebar_goknar.html" target="iframe1">Özgün GÖKNAR</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="sidebar_diger.html" target="iframe1">Diğer Yazarlar</a>
</nav>


<iframe name="iframe1" id="sidebar" width="310px" height="560px" src="sidebar.html"></iframe>
<iframe name="iframe2" id="content" width="1052px" height="560px" src="navigasyon.html"></iframe>




</body>
</html>

奖金问题：Firefox也会在左侧边栏上方显示红线，而IE和Chrome则不会。有关修复此问题的任何建议吗？

页面下方的空白区域 - 依赖于浏览器 - HTML / CSS

0 个答案: