CSS appears different on Windows than Mac

久未见 提交于 2019-12-13 01:57:45

问题


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 screenshot

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;
}

Thank You!


回答1:


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.

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.

Example:

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



回答2:


Different browsers have different CSS presets, or defaults. Therefore the default rendering will vary. In order to get around this problem, you can use a CSS reset stylesheet. Here is one that works well:

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

Using a reset stylesheet will remove any browser defaults. You can then add in your own margin/padding styling. This may require some adjustments to your current CSS values, but it will help overall when making your CSS cross-browser compatible.




回答3:


I know this is an old thread, but I thought I'd offer another answer... A solution I've used is to detect the OS using js, and set a class on the body denoting the OS.

//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");
}

Then in your css you can make special rules for the specific scenarios you need:

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

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


来源:https://stackoverflow.com/questions/22700119/css-appears-different-on-windows-than-mac

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!