CSS在Windows和Mac上表现不同

Question

CSS在Windows和Mac上表现不同

htmlcsswindowsmacosnav

4

当我在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;
}

感谢您的选择！

- kwright2713

这就是为什么你不应该对所有东西使用绝对和/或相对定位的原因...为了解决它，你需要重新构建你的CSS（推荐）或使用媒体查询和/或Javascript来补偿。 - Dryden Long

好的，就重构CSS代码而言，您会推荐使用什么替代相对和绝对定位的最佳方法？ - kwright2713

你正在重置默认浏览器规则吗？每个系统上使用的浏览器是什么？ - Shomz

@DrydenLong 相对部分没问题... 但是重构CSS - 不行！使用媒体查询 - 不行！使用JS - 绝对不行！！如果我听起来太严厉了，那我很抱歉，这只是一时冲动。 - Shomz

1

@DrydenLong 那就是方法。无论如何，未解决的默认浏览器规则才是造成布局问题的罪魁祸首...还有一些差异化渲染（这很好）。 - Shomz

显示剩余5条评论

3个回答

3

我知道这是一个老帖子，但是我想提供另一个答案......一个我使用的解决方案是使用js检测操作系统，并在body上设置一个表示操作系统的类。

我了解这是一个旧的帖子，但是我想提供另一种解决方案......我曾经使用的方法是使用JavaScript检测操作系统，并在body元素上设置一个标识操作系统的类。

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

接下来，在你的 CSS 中，你可以为特定的情况制定特殊规则：

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

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

- ConfusedProgrammer

2

不同的浏览器有不同的CSS预设或默认设置，因此默认渲染将有所不同。为了解决这个问题，您可以使用CSS重置样式表。这里是一个很好的样式表： http://meyerweb.com/eric/tools/css/reset/ 使用重置样式表会删除任何浏览器默认设置。然后，您可以添加自己的margin / padding样式。这可能需要对当前CSS值进行一些调整，但总体上有助于使您的CSS跨浏览器兼容。

- dgp

2

+1 但值得一提的是，有时候这些重置 CSS 是过度的，如果可能和适用的话，你不应该犹豫自己编写。 - Shomz

1

+1 绝对没错。'通用'的重置样式表会尝试覆盖几乎所有适用的标记。你可能会发现只重置你正在使用的标记更合适。 - dgp

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Guffa · Accepted Answer

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

您已经为一个浏览器的默认样式进行了补偿，这使得在其他所有浏览器中看起来非常不同。只要您补偿默认样式而不是覆盖它们，就会出现这个问题。

例如，对于 .slogan 样式，您应该将顶部和底部边距设置为零，而不是使用相对定位来补偿默认边距。您可以使用 line-height 在元素中垂直居中文本，而不是将其上下移动以将其放置在中心位置。

示例：

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