css - HTML 从 Windows 更改为 Mac

Question

所以我写了一个投资组合网站，但是我遇到了一些麻烦。我在 Windows 7 机器上编写了该站点，但是在家里我使用的是 Mac。 Windows 机器是 15"屏幕，Mac 是 13"，当然分辨率不同。基本上，问题是我有一个侧边栏 div，当在 Mac 上查看时它向下移动，而在 Windows 机器上查看时它是我想要的位置。我已经包括了一些屏幕截图，所以你明白了。第一个是在 Windows 7 上，第二个是在 Mac OSX 上。

Viewed on Windows

farm8.staticflickr.com/7373/8753141625_140ecbb3ce_b.jpg(在 mac 上查看)

我最初改变了一些东西。这是代码，然后我将解释我已经尝试过的内容:

<div id="hello" class="container clearfix scroll-content">

<h1>Hello!</h1>

<h2>Allow me to Introduce myself:</h2>
<h2>My Name is <span class="cas">Dom Greenslade</span></h2>
<h3><span class="experience">5</span>Years of Web Development Expereince</h3>
<h3><span class="me">Bachelors Degree</span> in <span class="me">Computer Science</span> Specialising In Programming and Scripting</h3> <br>
<h3>Born, Bred and Reside in: Poole, Dorset</h3><br>
<h3>Currently employed by: Foray Motor Group as Web and Ecommerce Developer</h3>   <br>


<div class="process">
How it's done

<img src="images/process2.png" height="460px">
</div>

</div>

和CSS:

.process{
position: relative;
bottom: 460px;
left:900px;
width: 150px;
height: 500px;
}

要查看完整代码，请告诉我，我可以在此处复制完整的网站，或者您可以在 www.domgreenslade.webuda.com 查看开发站点

所以这是我尝试过的: 将位置更改为绝对 向右浮动，删除位置。 将一些值更改为百分比而不是像素。

这就是有趣的地方。 我正抓着稻草从 chrome(我设计网站的浏览器)中查看检查元素中发生了什么，甚至标题的大小也与两个操作系统不同。它们是不同的分辨率，但即使我更改 Macbook 上的分辨率，边栏(进程)仍保持原样。 第一个在 Windows 上，第二个在 Mac 上。注意到 h1 大小的不同了吗？ 46px 和 43px 取决于操作系统？我该如何应对？它真的把网站搞砸了!

Windows view

(http:/farm4.staticflickr.com/3707/8754266312_7921962613_b.jpg 在 Mac 上查看

现在真的老实说卡住了，我错过了什么或者我做错了什么？非常感谢任何帮助。

非常感谢

Answer 1

或者，您可以使用 CSS 重置文件来平衡跨浏览器的不一致性。

一种广泛使用的 CSS 重置文件是 Meyer 的 CSS 重置文件。 http://meyerweb.com/eric/tools/css/reset/

请注意，现在将 CSS 重置文件应用于您的代码可能会弄乱其他一些东西(例如默认情况下，粗体不会是粗体)。