為什么在除Chrome瀏覽器之外的所有瀏覽器中這些div之間仍然存在空白？
[英]Why is there still white space between these divs in all browsers except Chrome?
問題描述
這是我的HTML：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Okmulgee Online</title>
<base href="/home.cshtml" />
<link href="/Styles/main.css" rel="Stylesheet" type="text/css" media="screen" />
<![if ! lte IE 8]><link href="/Styles/not_lte_IE8.css" rel="Stylesheet" type="text/css" media="screen" /><![endif]>
<!--[if lte IE 8]><link href="/Styles/lte_IE8.css" rel="Stylesheet" type="text/css" media="screen" /><![endif]-->
<link href="/Plugins/jquery-ui.css" rel="Stylesheet" type="text/css" />
<link href="/Images/Site_Icon/Scribe.ico" rel="shortcut icon" type="image/x-icon" />
<script src="/Resources/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/Plugins/jquery.maskedinput-1.3.min.js" type="text/javascript"></script>
<script src="/Plugins/jquery-ui.min.js" type="text/javascript"></script>
<script src="/Plugins/accounting.min.js" type="text/javascript"></script>
<script src="/Scripts/PluginConfigurations.js" type="text/javascript"></script>
<script src="/Scripts/main.js" type="text/javascript"></script>
</head>
<body>
<div id="topBar"></div>
<div id="mainWrapper">
<div id="bannerBar"></span><img alt="Okmulgee Banner Image" src="/Images/City_Images/banner.jpg" /></div>
<img id="colorFade" alt="Color Fading Background Image" src="/Images/Background_Images/GreenFadeBackground.jpg" />
<div id="btnWrapper">
<!--Buttons For Visitor Type Drop Down Links *START*-->
<div id="residentsDDL" class="DDL visType residentsDD"><img src="/Images/Background_Images/BrownButton.jpg" alt="Btn Img" /><div class="btnText">Residents</div></div><!--
--><div id="businessesDDL" class="DDL visType businessesDD"><img src="/Images/Background_Images/BrownButton.jpg" alt="Btn Img" /><div class="btnText">Businesses</div></div><!--
--><div id="visitorsDDL" class="DDL visType"><img src="/Images/Background_Images/BrownButton.jpg" alt="Btn Img" /><div class="btnText">Visitors</div></div><!--
<!--Buttons For Visitor Type Drop Down Links *END*--><!--
<!--Buttons For Category Type Drop Down Links *START*--><!--
--><div id="cityDDL" class="DDL groupType"><img src="/Images/Background_Images/GreyButton.jpg" alt="Btn Img" /><div class="btnText">City of Okmulgee</div></div><!--
--><div id="mainStreetDDL" class="DDL groupType"><img src="/Images/Background_Images/GreyButton.jpg" alt="Btn Img" /><div class="btnText">Main Street</div></div><!--
--><div id="organizationsDDL" class="DDL groupType"><img src="/Images/Background_Images/GreyButton.jpg" alt="Btn Img" /><div class="btnText">Organizations</div></div><!--
--><div id="oadcDDL" class="DDL groupType"><img src="/Images/Background_Images/GreyButton.jpg" alt="Btn Img" /><div class="btnText">OADC</div></div>
<!--Buttons For Category Type Drop Down Links *END*-->
</div><!--
--><div id="DBWrapper">
<div class="DDB residentsDD" id="residentsDDB">Goo'day Mate!</div><!--
--><div class="DDB businessesDD" id="businessesDDB"></div>
</div>
<p class="footer">© 2013 City Of Okmulgee. All rights reserved.</p>
</div>
</body>
</html>
而我的CSS：
body
{
width: 100%;
margin: auto;
}
#topBar
{
width: 100%;
height: 8px;
background-color: #57bf2a;
margin: auto;
}
div#bannerBar
{
height: 150px;
width: 100%;
margin: auto;
height: 150px;
background-color: #fff;
}
div#bannerBar img
{
width: 100%;
height: 100%;
}
div#mainWrapper
{
width: 75%;
width: 840px;
margin: auto;
margin-top: 50px;
background-color: #fff;
border: 1px solid #000;
border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
behavior: url(/Resources/PIE.htc);
/*Delete This*/height: 600px;
}
p.footer
{
text-align: center;
padding-top: 5px;
font-size: .8em;
}
img#colorFade
{
height: 35px;
width: 100%;
}
.DDL
{
position: relative;
width: 119px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
overflow: hidden;
line-height: 1.3em;
}
.DDL img
{
position: absolute;
vertical-align: bottom;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.DDL.visType
{
background-color: #bb9191;
border-right: 2px inset #9d6f6f;
color: #37691f;
}
.DDL.groupType
{
background-color: #6b6b6b;
border-right: 2px inset #4b4b4b;
color: #0b3773;
}
.DDL .btnText
{
position: relative;
z-index: 2;
text-align: center;
/*font-family: Tahoma, Geneva, sans-serif;*/
/*font-family: Impact, Charcoal, sans-serif;*/
font-family: Georgia, Serif;
font-size: .7em; /*was .9*/
font-weight: bolder;
padding: 7px 0px;
width: 100%;
margin: 0px;
}
.btnText:hover
{
color: #fff;
}
.DDL:hover
{
cursor: pointer;
background-color: #63bf5f;
}
.DDL img
{
opacity: .6;
filter: alpha(opacity = 60);
}
#oadcDDL
{
border-right: none;
}
#btnWrapper
{
white-space: nowrap;
overflow: hidden;
margin: 0px;
}
#DBWrapper
{
position: relative;
margin: 0px;
}
.DDB
{
background-color: #63bf5f;
border: 1px solid #555;
margin: 0px;
}
#residentsDDB
{
display: none;
position: absolute;
height: 200px;
width: 300px;
border-left: 0px none;
}
#businessesDDB
{
display: none;
position: absolute;
left: 60px;
height: 200px;
width: 300px;
}
和我的js文件：
jQuery(function ($) {
//Broken image error handling
$("img").error(function () {
$(this).hide();
});
//ddl functions
$(".DDL").mouseover(function () {
//$(this).find("img").css("display", "none");
$(this).find("img").css("visibility", "hidden");
});
$(".DDL").mouseout(function () {
//$(this).find("img").css("display", "initial");
$(this).find("img").css("visibility", "visible");
});
//residentsDDL Control
$("#residentsDDL").mouseover(function () {
$("#residentsDDB").css("display", "block");
});
$(".residentsDD").mouseover(function () {
$("#residentsDDB").css("display", "block");
$("#residentsDDL").css("background-color", "#63bf5f");
$("#residentsDDL").find("img").css("visibility", "hidden");
});
$(".residentsDD").mouseout(function () {
$("#residentsDDB").css("display", "none");
$("#residentsDDL").find("img").css("visibility", "visible");
$("#residentsDDL").css("background-color", "#bb9191");
});
//businessesDDL Control
$("#businessesDDL").mouseover(function () {
$("#businessesDDB").css("display", "block");
});
$(".businessesDD").mouseover(function () {
$("#businessesDDB").css("display", "block");
$("#businessesDDL").css("background-color", "#63bf5f");
$("#businessesDDL").find("img").css("visibility", "hidden");
});
$(".businessesDD").mouseout(function () {
$("#businessesDDB").css("display", "none");
$("#businessesDDL").find("img").css("visibility", "visible");
$("#businessesDDL").css("background-color", "#bb9191");
});
});
我討厭為這么簡單的事情發布太多代碼，但是如您所見，我通過在div之間放置html注釋消除了相關元素之間的空白。
我還確保任何相關元素都沒有空白，但是，我仍然在IE和Firefox中都看到了這一點（如果只是IE，我可以使用條件注釋來解決此問題）：
在Chrome中，我看到了它，就像我希望所有瀏覽器都渲染它一樣（一如既往，只有Chrome才能正確顯示它）：
白色空間從哪里來？ 跨瀏覽器，我該怎么做才能擺脫它？ （如果相關的話，我還必須遵守IE8）。
2 個解決方案
解決方案1
1 2013-05-01 22:17:13
可能是因為您的圖像使用默認的display: inline屬性，該屬性將行高應用於圖像，通常會導致圖像底部出現一些空白。
嘗試向.DDL img添加display: block ：
.DDL img
{
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
display: block;
}
解決方案2
0 已采納 2013-05-02 13:59:37
由於某些原因， #btnWrapper div被迫具有比IE和FF更大的行高。 添加（最多）0.7em的行高被證明可以關閉空白區域（有點有趣，因為實際的按鈕本身（包含在#btnWrapper div中）是用1.3em的行高渲染的，因此對我來說沒有任何意義，但是...）。
簡而言之，我只是將said屬性添加到#btnWrapper規則中，如下所示：
#btnWrapper
{
white-space: nowrap;
overflow: hidden;
margin: 0px;
line-height: .7em;
}
在Opera和Chrome瀏覽器中顯示的Divs之間的間隔
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.