[CSS在Windows上看起来与Mac不同

Question

当我在Windows中查看该站点时，大多数站点，如顶部文本，正确的联系人详细信息，导航文本和欢迎文本，都比在Mac上显示的要低。 Mac浏览器按原样显示CSS。请帮帮我...

Mac屏幕截图

<<

Windows屏幕截图

Windows20

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">[email protected]</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;
}

谢谢！

当我在Windows中查看该站点时，大多数站点，如顶部文本，正确的联系人详细信息，导航文本和欢迎文本，都比在Mac上显示的要低。 Mac浏览器按原样显示CSS ...

Answer 1

问题是浏览器具有不同的默认样式。两种显示页面的方式都没有错，只是有所不同。

您已经补偿了一种浏览器的默认样式，这使其在所有其他浏览器中看起来都大不相同。只要您补偿默认样式而不是覆盖默认样式，就会遇到问题。

Answer 2

不同的浏览器具有不同的CSS预设或默认值。因此，默认渲染将有所不同。为了解决此问题，您可以使用CSS重置样式表。这是一种效果很好的方法：

Answer 3

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

[CSS在Windows上看起来与Mac不同

问题描述投票：1回答：3

3个回答

最新问题

[CSS在Windows上看起来与Mac不同

问题描述 投票：1回答：3

3个回答

最新问题

问题描述投票：1回答：3