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 查看开发网站

这就是我尝试过的： 将位置更改为绝对 向右浮动并删除该位置。 将一些值更改为百分比而不是 px。

这就是有趣的地方。 我抓着稻草从 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 重置文件应用到您的代码可能会弄乱其他一些东西（例如粗体默认不会是粗体）。

Answer 2

网络大部分都有标准，但是每个浏览器都会以不同的方式中断这些标准，以及人们在计算机上的个人设置。屏幕分辨率和字体设置。

为了更正布局宽度以尝试适应所有浏览器并帮助其他人的屏幕分辨率，我会做的是设置 Liquid-max-min 布局。

body{
   width:95%; max-width:1200px; min-width:960px; <!-- These numbers you would have to adjust -->
}

对于跨浏览器的 h1 大小不同，我也会使用百分比或小、中、大、x-large 进行调整，并且始终不要将 font-size 设置为 px。

h1{
 font-size:300%; <!-- 100% is normal size font so we are multiplying by 3 to be 3x larger-->
}

不断调整它们，你就会得到你喜欢的东西。

当您测试这些时，我会在您的所有浏览器中尝试它们，以确保您获得让您晚上睡得香的外观和感觉。 :)