我有一个＆＃34;链接＆＃34; （有背景），当盘旋时显示下面的一个框（带背景）。该框与“链接”对齐，因此背景对齐。
这适用于最新的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;
}
答案 0 :(得分：0)
你正在使用今天糟糕的做法。我强烈建议对现代前端开发技术和标记进行额外的研究。甚至可以获取Bootstrap或Foundation的副本，并查看他们提供的一些开箱即用的组件。
尝试浏览器调试您提供的代码不会很好 - 代码库上的许多不必要的工作开始时都是错误的。