页面下方空白-取决于浏览器-HTML/CSS
上面的链接是我以前的网页模板。页面下方空白-取决于浏览器-HTML/CSS,css,internet-explorer,firefox,space,Css,Internet Explorer,Firefox,Space,上面的链接是我以前的网页模板。 在Chrome=中运行它不会导致任何问题 在Firefox=中运行会导致页面下方出现较小的空白 在IE=中运行会导致页面下方出现更大的空白 问题：如何消除IE和Firefox中出现的空白 通过滚动页面和iframe左侧栏可以观察到问题。（也可以在不做任何滚动的情况下观察到）文档当前查看的部分下方将有一个空格，尽管页面并未到此结束。 注意：忽略因iframe大小和滚动条禁用代码不兼容跨浏览器而导致的视觉问题。同时忽略标记错误（这些错误目前已修复，看起来与问题无关）。
在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>
<a href="index.html"">Anasayfa</a>
|
<a href="sidebar.html" target="iframe1">Tüm Yazarlar</a>
<a href="sidebar_yurdupak.html" target="iframe1">Onur YURDUPAK</a>
<a href="sidebar_goknar.html" target="iframe1">Özgün GÖKNAR</a>
<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>
İki Göz
函数停止（）
{
返回false；
}
document.onmouseheel=停止；
html{
属族：衬线；
字体系列：格鲁吉亚；
}
html:：-webkit滚动条{
显示：无；
}
#边栏{
边框样式：无；
左边距：-8px；
}
#内容{
边框样式：无；
左边距：-8px；
}
iframe:：-webkit滚动条{
显示：无；
浮动：左；
}
标题{
背景色：#EEEEEE；
填充顶部：10px；
垫底：8px；
利润上限：-8px；
}
导航{
颜色：#中交；
背景色：#303030；
填充顶部：8px；
垫底：8px；
左边距：-8px；
右边距：-8px；
}
#主标题{
颜色：BB0000；
字体大小：30px；
字体大小：正常；
}
#主标题跨度{
颜色：#111111；
字体大小：24px；
字体大小：正常；
左边距：5px；
}
a{
-webkit过渡：颜色300ms线性；
-moz过渡：颜色300ms线性；
-o-过渡：颜色300ms线性；
-ms过渡：颜色300ms线性；
过渡：颜色300ms线性；
}
a:链接{color:#EEEEEE；文本装饰：无；}
答：访问{颜色：#中交；文字装饰：无；}
a:悬停{
颜色：#FFFFFF；文本装饰：下划线；
-webkit过渡：颜色300ms线性；
-moz过渡：颜色300ms线性；
-o-过渡：颜色300ms线性；
-ms过渡：颜色300ms线性；
过渡：颜色300ms线性；
}
a:活动{color:#ffffffff；文本装饰：下划线；}
İki Göz:Yaşanmşlıklar，tespitler ve hikayelerle hayatın içinden。。。
|
附加问题：Firefox也在左侧边栏上方显示一条红线，而IE和Chrome则没有。有关于修复此问题的建议吗？。这可能解释了这种奇怪的行为。
页边距底部：0；正文