Divs重叠，但仅在Firefox中 [英] Divs overlapping but only in Firefox
本文介绍了Divs重叠，但仅在Firefox中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在创建一个网站，并且在Chrome，IE9，Opera和Safari中效果很好，但在Firefox中的BUT似乎有些重叠.
I have been creating a website and the result has been fine in Chrome, IE9, Opera and Safari, BUT in Firefox some of the divs seem to overlap.
以下分别是Chrome和Firefox中该网站的精简版的一些屏幕截图:
Here are some screenshots of a very cutdown version of the site in Chrome and Firefox, respectively:
http://i.imgur.com/VrYoB93.png?1
http://i.imgur.com/QKCM8KN.png?1
如果您能看一眼并告诉我我做错了什么，我将不胜感激.到目前为止的完整资源在这里:
I would be grateful if you could take a look and tell me what I have done wrong. The full source so far is here:
HTML:
<body>
<div class="container">
<div class="header">
<a href=""><img src="../Images/test.png"/></a>
<a href=""><img src="../Images/Twitter1.png" class="headerlink"/></a>
<a href=""><img src="../Images/YouTube2.png" class="headerlink"/></a>
<a href=""><img src="../Images/Ask.fm.png" class="headerlink"/></a>
</div>
<div> <!-- Links -->
<table align="center" width="900" cellspacing="0" border="0">
<td align="center" class="linkbarselected">Example link</td>
<td align="center" class="linkbar"><a href="">Example link</a></td>
<td align="center" class="linkbar"><a href="">Example link</a></td>
<td align="center" class="linkbar"><a href="">Example link</a></td>
<td align="center" class="linkbar"><a href="">Example link</a></td>
</table>
</div>
<div class="sidebar">
Example text in sidebar.
</div>
<div class="main">
<div class="content">
<span style="font-size:2em; color:red;">Good day!</span><p>
Example text blah blah blah<p>
</div>
</div>
</body>
</html>
CSS:
}
.container {
width: 900px;
margin: 0 auto;
}
.header {
background: transparent;
float: left;
}
.linkbar {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
background-color: #333333;
color: #FFFFFF;
height: 15px;
}
.main {
height: 200px;
background-color: #CCCCCC;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
padding-left: 20px;
padding-top: 30px;
padding-bottom: 30px;
}
.content {
width: 600px;
float: left;
background-color: #FFFFFF;
border-radius: 15px;
padding: 10px 10px;
}
.sidebar {
float: right;
width: 230px;
padding-right: 20px;
padding-top: 30px;
padding-bottom: 30px;
}
.headerlink {
height: 70px;
width: 70px;
border-radius: 10px;
position: relative;
bottom: 30px;
}
推荐答案
这是浮动错误. 看看我做了什么.
It was the float bug. Look at what I did.
jsfiddle.net/pJZ6F/1
jsfiddle.net/pJZ6F/1
这篇关于Divs重叠，但仅在Firefox中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
