Html firefox和google chrome中的定位不匹配
第一张图片是谷歌chrome中的外观(正确),第二张图片是firefox中的外观(错误) 有什么提示可以帮助我在firefox中解决这个问题吗?多谢各位Html firefox和google chrome中的定位不匹配,html,css,position,less,css-position,Html,Css,Position,Less,Css Position,第一张图片是谷歌chrome中的外观(正确),第二张图片是firefox中的外观(错误) 有什么提示可以帮助我在firefox中解决这个问题吗?多谢各位 <div class="container"> <div id="top"> <div class="top-bar"> <div id="logo"></div> <div class="top-bar-r
<div class="container">
<div id="top">
<div class="top-bar">
<div id="logo"></div>
<div class="top-bar-red-stripe">
<ul class="top-bar-social-btns">
<li><a href="" class="top-bar-twitter-btn">facebook</a></li>
<li><a href="" class="top-bar-facebook-btn">facebook</a></li>
</ul>
</div>
</div><!-- /.top-bar -->
<div id="top-left-content">
<h3>This is a title</h3>
<div class="race-drivers"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div id="video-content">
<h3>LATEST WEBISODE</h3>
<div class="video-file"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing</p>
<a href="#" class="all-webisodes-btn">View all webisodes</a>
</div>
<div id="vote-content">
<h3>VOTE FOR WHAT HAPPENS NEXT</h3>
<div class="vote-bar">
<a href="#" class="vote-enhancements">Enhancements</a>
<a href="#" class="vote-compass">Compass</a>
<a href="#" class="vote-activities">Activities</a>
<a href="#" class="vote-btn">Vote</a>
</div>
</div><!-- #vote-content -->
</div><!-- /#top -->
</div><!-- /.container -->
.container {
width: 960px;
margin: 0 auto;
border: @outside-border;
#top {
background: #000 url('../images/top_background.jpg') no-repeat;
height: 505px;
#video-content {
position: absolute;
margin: 0;
padding: 0;
top: 85px;
right: 239px;
border: 1px solid red;
width: 500px;
h3 {
margin: 0;
}
p {
margin: 0;
}
.video-file {
position: absolute;
background: #ccc;
border: 2px solid #3592cd;
width: 400px;
height: 240px;
}// .video-file
a.all-webisodes-btn:link, a.all-webisodes-btn:visited {
display: inline-block;
overflow: hidden;
text-indent: -9999px;
background: transparent url('../images/all-webisodes-btn.png') no-repeat;
width: 88px;
height: 65px;
position: absolute;
top: 107px;
right: -2px;
}// .all-webisodes-btn
}// #video-content
#vote-content {
width: 442px;
position: absolute;
top: 328px;
right: -523px;
position: relative;
h3 {
margin: 0 0 0 15px;
}
.vote-bar {
position: relative;
//border:1px solid red;
background: transparent url('../images/vote-bar-bg.png') no-repeat;
width: 438px;
height: 73px;
position: relative;
a:link, a:visited {
display: inline-block;
overflow: hidden;
text-indent: -9999px;
}
a.vote-enhancements:link, a.vote-enhancements:visited {
background: transparent url('../images/enhancements_btn.png') no-repeat;
width: 86px;
height: 42px;
position: relative;
top: 10px;
left: 170px;
}
a.vote-compass:link, a.vote-compass:visited {
background: transparent url('../images/compass_btn.png') no-repeat;
width: 52px;
height: 42px;
position: relative;
top: 10px;
left: 190px;
}
a.vote-activities:link, a.vote-activities:visited {
background: transparent url('../images/activities_btn.png') no-repeat;
width: 56px;
height: 42px;
position: relative;
top: 10px;
left: 210px;
}
a.vote-btn:link, a.vote-btn:visited {
background: transparent url('../images/vote-now-btn.png') no-repeat;
width: 141px;
height: 34px;
position: relative;
top: 47px;
left: 73px;
}
}// .vote-bar
}// .vote-content
}// #top
}// .container
看起来#视频内容元素在Firefox中可能有空白。在绝对定位元素之前,应将其移除
在CSS的开头尝试以下操作:
* { margin: 0; padding: 0px; }
这没有做任何事情,它必须在父div中,我将更新我的问题并包括所有这些。让它工作。我将#视频内容位置设置为相对,将其子元素位置设置为绝对,并根据需要调整顶部/右侧/左侧/底部。
* { margin: 0; padding: 0px; }