CSS在Windows上顯示的不同於Mac

當我在Windows中查看網站時，大部分網站（如頂部文本，右側聯繫人詳細信息，導航文本和歡迎文字）都顯示爲比在Mac上更低。 Mac瀏覽器顯示CSS應該是。請幫我...CSS在Windows上顯示的不同於Mac

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

謝謝！

來源

2014-03-27 kwright2713

這就是爲什麼你不應該使用絕對和/或相對定位的一切......爲了解決這個問題，你就需要要麼重新構造你的CSS（推薦）或使用媒體查詢和/或Javascript進行補償。 –

好的，就重構CSS代碼而言，您會推薦最好的東西來代替相對和絕對位置嗎？ – kwright2713

您是否重置默認瀏覽器規則？您在每個系統上使用哪些瀏覽器？ – Shomz

問題是瀏覽器具有不同的默認樣式。顯示頁面的方式都不是錯的，它們只是不同而已。

您已經補償了一個瀏覽器的默認樣式，這使得它在所有其他瀏覽器中看起來完全不同。只要你補償默認樣式而不是覆蓋它們，你就會遇到這個問題。

例如，對於.slogan風格，您應該將頂部和底部邊距設置爲零，而不是使用相對定位來補償默認邊距。您可以使用line-height將元素垂直居中放置在元素中，而不是將其向上或向下移動以將其置於中心。

例子：

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

來源

2014-03-27 22:16:53 Guffa

非常感謝你在這裏的例子。在修改我的CSS後，刪除一些相對定位和使用行高已經在兩個操作系統上都非常完美。 – kwright2713

不同的瀏覽器有不同的CSS預設或默認值。因此默認的渲染會有所不同。爲了解決這個問題，你可以使用CSS重置樣式表。這是一個行之有效：

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

使用重置樣式表將刪除所有瀏覽器的默認值。然後您可以添加自己的邊距/填充樣式。這可能需要對當前的CSS值進行一些調整，但是在使CSS跨瀏覽器兼容時，這將有助於整體性。

來源

2014-03-27 22:05:28 dgp

+1但值得一提的是，有時候這些重置的CSS有點過大，如果可能並且適用的話，你應該毫不猶豫地寫你自己的。 – Shomz

+1絕對如此。 '通用'重置樣式表將嘗試覆蓋幾乎所有可用的標記標記。您可能會發現它更適合重置您正在使用的標籤。 – dgp

CSS在Windows上顯示的不同於Mac

回答

相關問題