CSS在Mac上显示不同 [英] CSS appears different on Windows than Mac
问题描述
当我在Windows中查看网站时，大多数的网站，如顶部的文字，正确的联系方式，导航文本和欢迎文本显示低于他们在mac上。 Mac浏览器显示CSS应该是。请帮助我...
When I view the site in Windows then most of the site, like the top text, right contact details, nav text and welcome text appear lower than they do on the mac. Mac browsers show the CSS as it should be. Please help me out...
Mac截图
Windows屏幕截图
Windows screenshot
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;
}
谢谢！
推荐答案
问题是浏览器具有不同的默认样式。无法显示您的网页是错误的，它们只是不同的。
The problem is the different default styles that browsers have. Neither way of displaying your page is wrong, they are just different.
您已经补偿了一个浏览器的默认样式，这使它看起来完全不同在所有其他浏览器。
You have compensated for the default styles of one browser, which makes it look quite different in all other browsers. As long as you compensate for the default styles instead of overriding them, you will have that problem.
例如，对于 .slogan
For example, for the .slogan style you should set the top and bottom margin to zero, instead of using relative positioning to compensate for the default margin. You can use line-height to center the text vertically in the element, instead of moving it up or down to place it in the center.
示例：
.slogan{
width: 960px;
line-height: 30px;
margin: 0 auto;
color: white;
font-size: 1.3em;
font-family: 'Aldrich', cursive;
}
这篇关于CSS在Mac上显示不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
