我有一个“链接”(带背景)的设置，悬停时会在下方显示一个框(带背景)。该框与“链接”对齐，因此背景对齐。
这在最新的 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;
}
最佳答案
您使用的表格在今天是很糟糕的做法。我强烈建议对现代前端开发技术和标记进行额外的研究。甚至去拿一份 Bootstrap或 Foundation并查看他们提供的一些开箱即用的组件。
尝试在浏览器中调试您提供的代码并不是一件好事——在一开始就不正确的代码库上进行大量不必要的工作。
关于html - 边距和填充(我猜)在浏览器中有所不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22364965/