CSS定位-相对定位问题
CSS定位-相对定位问题
提问于 2016-01-14 03:51:30
我已经创建了一个网站，但我注意到使用IE浏览器时导航栏略有偏离。我已经读到了位置:相对可能是关键字，但当我应用它时，导航栏根本不响应IE中的位置命令(顶部、左侧等)，并且在重新加载几次时会出现在FF浏览器的不同位置。
请告诉我哪种方法是在不同浏览器中正确定位元素的标准方法，并告诉我将导航栏div从absolute更改为relative>的错误在哪里
非常感谢
代码提示:页面由向左浮动的公司徽标(id=banner)，向右浮动的城镇和电话号码(id=info)的小列表组成。导航栏是列表形式的，我使用block:inline命令使列表从左到右显示。
/* ----All page selectors---- */
body{
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
font-size:16px;
}
.page {
position: relative;
margin-left:auto;
margin-right:auto;
background-color: rgba(255,255,255,0.4);
font-family: gabriola, Verdana, Geneva, sans-serif;
color: #383838;
font-weight: bolder;
}
.banner a{
color: black;
text-decoration: none;
letter-spacing:10px;
}
#bannerText{
text-align:center;
}
.banner{
font-family: sans-serif, Verdana, Geneva;
}
#phonenum{
font-family: sans-serif, Verdana, Geneva;
}
#info{
font-weight:bold;
color: #505050;
line-height:110%;
}
ul a{
color: #383838;
}
/* ----Desktop only---- */
@media screen and (min-width:481px) {
body{
background-image: url("images/water.jpg");
}
#info{
font-size: 200%;
float: right;
right:0px;
width: 230px;
margin: 15px 25px 0px 0px;
padding:15px 5px 5px 5px;
}
#info ul{
margin:0px;
padding-left:63px;
}
#phonelogo{
float:left;
width:30px;
}
#phonenum{
float:right;
width: 190px;
margin:0%;
font-size: 80%;
font-family: sans-serif, Verdana, Geneva;
}
.banner{
float:left;
padding-top:1px;
margin-left: 18px;
opacity: 0.7;
}
#banner{
margin-top: 20px;
}
.banner p{
margin:0px;
}
#bannerText{
letter-spacing: 5px;
margin-bottom:5px;
padding-left:5px;
}
.btn{display:none;}
#toolbar {
position: absolute;
margin:220px 0px 0px 16px;
opacity: 0.7;
}
.menu li a{
font-family: gabriola, Verdana, Geneva, sans-serif;
font-size: 140%;
font-weight: bold;
text-decoration: none;
color: black;
margin-right:30px;
}
.nav{
position: absolute;
list-style-type: none;
top:10px;
left:-33px;
}
.nav ul li{
display: inline;
}
.nav ul li a{
font-family: gabriola, Verdana, Geneva, sans-serif;
font-size: 140%;
font-weight: bold;
text-decoration: none;
color: black;
}
.nav ul li a:hover{
color: yellow;
}<div id="homePage" class="page">
<div class="banner">
<p id="banner">
<a href="index.htm"><img src="images/Logo.png" alt="
Logo for site" /></a>
</p>
<p id="bannerText"><a href="Slogan link.htm">
Slogan under the Logo</a></p>
</div>
<div id="info">
<table>
<tr>
<td id="phonelogo"><img src="images/phoneimage.png" alt="
Mobile phone image" /></td>
<td id="phonenum">(08080) 080 080</td>
</tr>
</table>
<ul>
<li>Town A</li>
<li>Town B</li>
<li>Town C</li>
</ul>
</div>
<div id="toolbar">
<div>
<p id="toolBackground">
<img src="images/toolBackground.png" alt="
Coloured background for toolbar" />
</p>
</div>
<div class="dropdown">
<ul class="nav">
<li><img class="btn" src="images/menuIcon.png" alt="
Menu button for mobile site version" />
<ul class="menu">
<li><a href="page.htm">Page1</a></li>
<li><a href="page.htm">Page1</a></li>
<li><a href="page.htm">Page1</a></li>
<li><a href="page.htm">Page1</a></li>
<li><a href="page.htm">Page1</a></li>
<li><a href="page.htm">Page1</a></li>
<li><a href="page.htm">Page1</a></li>
</ul>
</li>
</ul>
</div>
</div>
回答 1
Stack Overflow用户
发布于 2016-01-14 05:26:28
始终使用css重置，以便不同浏览器的样式相同。我总是使用非常小的css重置：
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}然后，在不同的浏览器之间，所有的东西看起来(大部分)应该是一样的。还要记住显示: inline-block；根据字体大小在元素之间添加空格。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34775797
复制相关文章
相似问题
腾讯云开发者
