Question

我正在构建一个带有菜单栏的测试页面，但是在Chrome和Mozilla中，deviders（基本上是宽度为1的div）的位置不同。我在Chrome中构建它，并发现它以不同的方式进行定位时发现它很奇怪。有谁知道这可能导致什么？我的代码如下：

HTML 的

<head>
<link rel="stylesheet" type="text/css" href="global.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300' rel='stylesheet' type='text/css'>
</head>


<!-------------------------------------------MENUDEV1------------------------------------------->
<div id="menuContainer">
    <!-----------------------------------DEVIDER----------------------------------->
    <div id="menuLogo">
        <a href="/home.html">
            <img id="menuLogo2" src="http://www.placehold.it/126x50/ff0000/000000&text=Logo+gaat+hier">
        </a>
    </div>
    <div id="menuDevide1"></div>
    <!-----------------------------------DEVIDER----------------------------------->
    <div id="menuPortfolio1">
        <a id="menuPortfolio2" class="menuClick" href="portfolio.html">portfolio</a>

    </div>
    <div id="menuDevide2"></div>
    <!-----------------------------------DEVIDER----------------------------------->
    <div id="menuServices1">
        <a id="menuServices2" class="menuClick" href="services.html">services</a>

    </div>
    <div id="menuDevide3"></div>
    <!-----------------------------------DEVIDER----------------------------------->
    <div id="menuProcess1">
            <a id="menuProcess2" class="menuClick" href="process.html">our process</a>

    </div>
    <div id="menuDevide4"></div>
    <!-----------------------------------DEVIDER----------------------------------->
    <div id="menuContact1">
        <a id="menuContact2" class="menuClick" href="contact.html">contact</a>

    </div>
    <!-----------------------------------DEVIDER----------------------------------->
    </div>
<div id="menuBottomline"></div>
<!-----------Everything from MENUDEV1 up to this point should be considered as a whole.----------->

CSS

#menuContainer{
width:650px;
height:50px;

margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
background-color:rgba(100, 100, 100, 0.46);
}

#menuLogo2{
height:50px;
width:126px;
}
/*ALL "menuDevide" IDS ARE TO BE NUDGED TO THE LEFT 2 TO 3 PIXELS AFTER THE MENU ITEMS HAVE BEEN PLACED!*/
#menuDevide1{
width:1px;
height:45px;

background-color:black;

position:relative;
top:-47.5px;
left:131px;

margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}

#menuDevide2{
width:1px;
height:45px;

background-color:black;

position:relative;
top:-119.5px;
left:259px;

margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}

#menuDevide3{
width:1px;
height:45px;

background-color:black;

position:relative;
top:-191.5px;
left:386px;

margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}

#menuDevide4{
width:1px;
height:45px;

background-color:black;

position:relative;
top:-263.5px;
left:515px;

margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}

#menuBottomline{
width:100%;
height:1px;
background-color:black;

position:absolute;
top:70px;
left:0px

}


.menuClick{
color:#000000;
text-decoration:none;
font-family: "Open Sans", Arial, sans-serif;
font-size:20px;;
}


.menuClick:hover{
color:#999999;
}


#menuPortfolio1{
position:initial;
top:-83px;
left:13px;
width:126;
}


#menuServices1{
position:initial;
top:-83px;
left:131px;
width:126;
}

#menuProcess1{
position:initial;
top:-83px;
left:131px;
width:126;
}

#menuContact1{
position:initial;
top:-83px;
left:131px;
width:126;
}




#menuPortfolio2{

}


#menuServices2{

}

#menuProcess2{

}

#menuContact2{

}

或者，您可以查看此JSfiddle

Answer 1

每个浏览器都有自己的默认设置，包括字体大小，边距和/或某些元素周围的填充等.Webdesigners应该的目标是让他们的网站在各种浏览器上都能很好地显示，但这些不同的默认设置很容易导致问题

http://meyerweb.com/eric/tools/css/reset/是一个在每个浏览器中将所有默认css属性重置为零的工具。我试图在你的JSfiddle中添加它，风格在FF和Chrome中以相同的方式应用。 OFC，现在你必须重做它直到想要的结果。

浏览器显示定位div不同

1 个答案: