0
我有一個「鏈接」（帶背景）的設置，當徘徊時在下面顯示一個框（帶背景）。該框與「鏈接」對齊，以便背景對齊。保證金和填充（我猜）在瀏覽器中有所不同
這適用於最新的Chrome，Opera和Safari，但在Internet Explorer和Firefox中，填充和邊距有差別（我猜）。
JSFiddle demonstration，顯然你需要在不同的瀏覽器:)
什麼是這個原因，你如何解決這個問題看？
HTML：
<div id="banner-wrap">
<div class="container">
<div class="banner-text"><span>Hello</span> world. <span>Hello</span> guys.
<br/>
<div class="banner-links">
<table>
<tr class="first">
<td class="first">about</td>
<td class="second">about</td>
<td class="third">about</td>
</tr>
<tr class="second">
<td class="first"><a href="#" onclick="return false">Lorem ipsum 1</a>
<div id="info-first">Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae.</div>
</td>
<td class="second"><a href="#" onclick="return false">Lorem ipsum 2</a>
<div id="info-second">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</div>
</td>
<td class="third"><a href="#" onclick="return false">Lorem ipsum 3</a>
<div id="info-third">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
CSS：
body {
background: #c8c8c8;
}
a {
text-decoration: none;
}
.container {
position: relative;
width: 960px;
margin: 0 auto;
height: 100%;
vertical-align: middle;
}
#banner {
overflow:hidden;
border-bottom:0px solid #c83232;
margin:4;
display:none;
}
#banner-content-wrap {
position: absolute;
top: 33%;
}
.banner-text {
text-align: center;
position: absolute;
height: 80px;
width: 950px;
overflow: hidden;
padding: 0;
overflow: visible;
font-size: 36px;
font-family:'Berlin Sans FB';
color: #fff;
text-shadow: 0px -1px 8px rgba(0, 0, 0, 0.33);
}
.banner-text span {
color: #c83232;
}
.banner-links table {
width: auto;
margin-left: auto;
margin-right: auto;
padding-top: 25px;
overflow: visible;
}
.banner-links tr.first td.first {
text-align: center;
padding-right: 50px;
}
.banner-links tr.first td.second {
text-align: center;
}
.banner-links tr.first td.third {
text-align: center;
padding-left: 50px;
}
.banner-links tr.first {
text-transform: uppercase;
font-size: 10px;
font-family:'Verdana';
color: #fff;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.33);
opacity: 0.8;
}
.banner-links tr.second td.first {
text-align: center;
padding-right: 50px;
overflow: visible;
}
.banner-links tr.second td.second {
text-align: center;
overflow: visible;
}
.banner-links tr.second td.third {
text-align: center;
padding-left: 50px;
overflow: visible;
}
.banner-links tr.second {
line-height: 5px;
overflow: visible;
}
.banner-links tr.second a {
text-transform: uppercase;
font-size: 18px;
font-family:'Verdana';
padding: 1px 10px 1px 10px;
margin: 0;
color: #fff;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
text-shadow: 0px -1px 8px rgba(0, 0, 0, 0.33);
-webkit-transition: 0.5s;
/* For Safari 3.1 to 6.0 */
transition: 0.5s;
overflow: visible;
cursor: default;
}
.banner-links tr.second td.first:hover a {
color: #c83232;
text-decoration: none;
background: rgba(255, 255, 255, 0.75);
z-index: 1001;
}
.banner-links tr.second td.second:hover a {
color: #c83232;
text-decoration: none;
background: rgba(255, 255, 255, 0.75);
z-index: 1001;
}
.banner-links tr.second td.third:hover a {
color: #c83232;
text-decoration: none;
background: rgba(255, 255, 255, 0.75);
z-index: 1001;
}
.banner-links tr.second td.first:hover #info-first {
visibility: visible;
opacity: 1.0;
}
.banner-links tr.second td.first #info-first {
position: absolute;
margin: 15px 0px 0px 0px;
padding: 15px 20px 15px 20px;
right: 50%;
margin-right: -365px;
text-align: justify;
width: 700px;
height: auto;
font-size: 13px;
font-weight: 500;
background: rgba(255, 255, 255, 0.75);
overflow: visible;
font-family:'Verdana';
line-height: 17px;
color: #323232;
border-radius: 3px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);
visibility: hidden;
opacity: 0.0;
-webkit-transition: 0.5s;
/* For Safari 3.1 to 6.0 */
transition: 0.5s;
z-index: 1000;
}
.banner-links tr.second td.second:hover #info-second {
visibility: visible;
opacity: 1.0;
}
.banner-links tr.second td.second #info-second {
position: absolute;
margin: 15px 0px 0px 0px;
padding: 15px 20px 15px 20px;
right: 50%;
margin-right: -365px;
text-align: justify;
width: 700px;
height: auto;
font-size: 13px;
font-weight: 500;
background: rgba(255, 255, 255, 0.75);
overflow: visible;
font-family:'Verdana';
line-height: 17px;
color: #323232;
border-radius: 3px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);
visibility: hidden;
opacity: 0.0;
-webkit-transition: 0.5s;
/* For Safari 3.1 to 6.0 */
transition: 0.5s;
z-index: 1000;
}
.banner-links tr.second td.third:hover #info-third {
visibility: visible;
opacity: 1.0;
}
.banner-links tr.second td.third #info-third {
position: absolute;
margin: 15px 0px 0px 0px;
padding: 15px 20px 15px 20px;
right: 50%;
margin-right: -365px;
text-align: justify;
width: 700px;
height: auto;
font-size: 13px;
font-weight: 500;
background: rgba(255, 255, 255, 0.75);
overflow: visible;
font-family:'Verdana';
line-height: 17px;
color: #323232;
border-radius: 3px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);
visibility: hidden;
opacity: 0.0;
-webkit-transition: 0.5s;
/* For Safari 3.1 to 6.0 */
transition: 0.5s;
z-index: 1000;
}
原因：瀏覽器的默認樣式表。修正：如果你不喜歡那些默認的邊距/填充值，那麼明確地提供你自己的。 – CBroe
除表格數據之外，不要將表格用於** anything **。如果您想要構建一個類似於表格的佈局，請使用適當的顯示屬性。 – Nit
@Nit Okey，有趣。幾個星期前我剛開始做網站和編碼。但你說的顯示屬性？所以就像這三個'鏈接'我應該使用像'顯示：內聯'，然後居中這些'鏈接'的包裝div？ – vikar