Question

我不知道会导致这种情况的原因，但主机站点和本地服务器上完全相同的代码被同一个iexplore浏览器解释不同。 CSS导航栏（见下面的代码）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>site</title>
<style type="text/css">
* {
font-family: "Helvetica";
}

#master {
width: 960px; margin: 0 auto; 
}
#Banner {
height: 153px;
width: 960px;
}
#navMenu {
height: 40px;
width: 960px;
font-size: 14px;
}
.div1 {
margin: 0px;
}
.div1 ul li {
float: left;
list-style-type: none;
}
ul {
list-style-type: none; 
margin: 0; 
padding: 0;
}
ul li a {
color: #FBF7F7;
background-color: #353333;
text-decoration: none;
display: block;
width: 136px;
height: 38px;
text-align: center;
line-height: 38px;
border-left: thin solid #CCCCCC;
}
ul li a:hover {
background-color: #666666;
}
.noBorder {
border-left-style: none !important; 
}
.leftEdge {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.rigthEdge {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}



</style>
</head>
<body>
<div id="master">

<div id="Banner"><img src="web_banner.jpg" width="960" height="150" alt=""/>       </div>

<div id="navMenu">
<div class="div1">
<ul>
<li><a href="index.php" class="noBorder leftEdge">Home</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="submit_report.php">Submit Report</a></li>
<li><a href="search_square.php">Search Square</a></li>
<li><a href="species_info.php">Species Info</a></li>
<li><a href="resources.php">Resources</a></li>
<li><a href="contact.php" class="rigthEdge">Contact Us</a></li>
</ul>
</div> 
</div>
</body>
</html>

在本地服务器（MAMP）上的

菜单列表项在导航栏div中正确显示（间距和外边缘圆整）。当从主机站点加载相同的代码时，外部列表的圆形边缘将丢失，最后一个列表值将被包裹在第一个列表下方（如果我将px更改为135，则会将其移回到正确的位置）导航栏，但仍然没有圆角）。

我完全混淆会导致这种行为的原因是什么？有没有人以前经历过这个并且可能知道解决方案？

Answer 1

几乎总是，资源管理器中的这种问题是由于它的本地Intranet设置，它默认以IE7兼容模式显示本地页面。

查看IE的配置以查找此设置并将其关闭，您应该会发现页面在本地计算机上开始正确呈现。

您还可以将X-UA-Compatible元标记添加到HTML代码中，以强制IE忽略此设置并以特定模式显示（最好是＆＃34; edge＆＃34;模式，因为它告诉它使用可用的最佳模式。）

当相同的内容加载到同一浏览器上时，iexplorer.exe的行为与远程vs本地不同

1 个答案: