Question

当我在Windows中查看该网站时，该网站的大部分内容（如顶部文本，正确的联系人详细信息，导航文本和欢迎文本）显示为低于它们在Mac上的显示。 Mac浏览器显示应该是的CSS。请帮帮我...

Mac截图

Windows屏幕截图

HTML

<body>
<div id="wholepage">
<header>
<div id="nav_top">
<nav>
<h1 class="slogan">Steel & Fabrication Specialists</h1>
</nav>
</div>
<a href="index.html"><img class="kks_logo" src="KKSLogo.png" border="0" alt="KKS Services   Ltd logo"></a>
<h1 class="logo">KKS</h1>
<h2 class="logosub">Services Ltd</h2>
<h3 class="head_contact">0113 2826946</h3>
<h3 class="head_contact"><a href="contact.html">enquiries@kksservices.co.uk</a></h3>
<nav id="main_nav">
<ul id="nav_main">
 <li><a class="current_index" href="index.html">HOME</a></li>
 <li><a class="domestic" href="domestic.html">DOMESTIC</a></li>
 <li><a class="automation" href="automation.html">AUTOMATION</a></li>
 <li><a class="commercial" href="commercial.html">COMMERCIAL</a></li>
 <li><a class="contact" href="contact.html">CONTACT</a></li>
</ul>
</nav>
<img class="rivot" src="rivot.png" alt="KKS Services Ltd Rivot"/>
<img class="rivot2" src="rivot.png" alt="KKS Services Ltd Rivot"/>
<img class="rivot3" src="rivot.png" alt="KKS Services Ltd Rivot"/>
<img class="rivot4" src="rivot.png" alt="KKS Services Ltd Rivot"/>
</header>
<section>
<article>
<img class="railings" src="index_rail.png" alt="KKS Services Gates and Railings"/>
 <div id="welcome">
<h1 class="welcome">Welcome</h1>

CSS

.slogan{
position: relative;
width: 960px;
margin-left: auto;
margin-right: auto;
left: 10px;
top: -5px;
color: white;
font-size: 1.3em;
font-family: 'Aldrich', cursive;
}
.kks_logo{
position: relative;
top: 50px;
}
.head_contact{
font-family: 'Aldrich', sans-serif;
position: relative;
left: 10px;
top: -175px;
font-size: 1.5em;
text-align: right;
}
ul#nav_main li{
display: inline;
padding: 26px;
}
ul#nav_main li a{
text-decoration: none;
color: white;
font-family: 'Aldrich', sans-serif;
font-size: 1.4em;
position: relative;
top: 13px;
}
#welcome{
position: relative;
top: -267px;
left: 70px;
width: 840px;
height: 35px;
background-color: rgba(0,0,0,0.6);
border-radius: 5px;
}
#welcome h1{
color: white;
font-family: 'Aldrich', sans-serif;
padding: 10px;
font-size: 200%;
position: relative;
top: -5px;
left: 10px;
}

谢谢！

Answer 1

问题在于浏览器具有的不同默认样式。无论是显示页面的方式都不对，它们都是不同的。

您已经补偿了一个浏览器的默认样式，这使得它在所有其他浏览器中看起来完全不同。只要你补偿默认样式而不是覆盖它们，你就会遇到这个问题。

例如，对于.slogan样式，您应将顶部和底部边距设置为零，而不是使用相对定位来补偿默认边距。您可以使用line-height将文本垂直居中放置在元素中，而不是将其向上或向下移动以将其置于中心。

示例：

.slogan{
  width: 960px;
  line-height: 30px;
  margin: 0 auto;
  color: white;
  font-size: 1.3em;
  font-family: 'Aldrich', cursive;
}

Answer 2

不同的浏览器具有不同的CSS预设或默认值。因此，默认呈现会有所不同。为了解决这个问题，您可以使用CSS重置样式表。这是一个运作良好的：

http://meyerweb.com/eric/tools/css/reset/

使用重置样式表将删除所有浏览器默认值。然后，您可以添加自己的边距/填充样式。这可能需要对您当前的CSS值进行一些调整，但在使CSS跨浏览器兼容时，这将有助于整体。

Answer 3

我知道这是一个旧线程，但是我想我会提供另一个答案...我使用的解决方案是使用js检测操作系统，并在表示操作系统的主体上设置一个类。

//Windows
if (navigator.appVersion.indexOf("Win") != -1){
  document.getElementsByTagName("body")[0].classList.add("win");  
}
//Mac
else if (navigator.appVersion.indexOf("Mac") != -1){
  document.getElementsByTagName("body")[0].classList.add("mac");
}

然后在CSS中，可以针对所需的特定方案制定特殊规则：

.some-class-name{
  margin-top: 3px;
}

.mac .some-class-name{
  margin-top: 5px;
}

CSS在Windows上的显示与Mac不同

3 个答案: