【发布时间】：2014-05-07 03:56:55
【问题描述】：
当我在 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;
}
谢谢！
【问题讨论】：
-
这就是为什么您不应该对所有内容都使用绝对和/或相对定位的原因...为了解决它，您需要重新构建 CSS（推荐）或使用媒体查询和/或 Javascript 来补偿。
-
好的，在重构 CSS 代码方面，您建议最好使用什么来代替相对位置和绝对位置？
-
您是否正在重置默认浏览器规则？您在每个系统上使用的浏览器是什么？
-
@DrydenLong 我不得不说这是我曾经在这里看到的最糟糕的建议...
-
@DrydenLong 这就是方法。无论如何，这是未解决的默认浏览器规则正在扼杀这里的布局......并且每个都有一些不同的渲染（这很好）。
标签： html css windows macos nav