ということで、ポートフォリオサイトを書いたのですが、困っています。私は Windows 7 マシンでサイトを書きましたが、自宅では Mac を使用しています。Windows マシンは 15 インチの画面で、Mac は 13 インチで、解像度は明らかに異なります。基本的に、問題は私が持っているサイドバー div です。これは、Mac で表示すると下に移動し、Windows マシンで表示するときに配置したい場所になります。いくつかのスクリーンショットを含めて、アイデアを理解してください。1 つ目は Windows 7 で、2 つ目は Mac OSX です。
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;
}
完全なコードを表示するには、私に知らせてください。完全な Web サイトをここにコピーできます。または、www.domgreenslade.webuda.com で開発サイトを表示できます。
だから、私が試したことは次のとおりです。位置を絶対に右にフローティングに変更し、位置を削除しました。一部の値を px ではなくパーセンテージに変更しました。
ここが興味深いところです。私はストローをつかんで、何が起こっているのかを確認し、クロム (サイトを設計したブラウザー) 内から検査要素内で調べていましたが、見出しのサイズでさえ、2 つのオペレーティング システムとは異なります。解像度が違うのですが、Macbookで解像度を変えてもサイドバー(処理)はそのままです。1 つ目は Windows、2 つ目は Mac です。h1 のサイズの違いに注目してください。OSによって46pxと43px？どうすればこれに対抗できますか？それは本当にサイトを台無しにしています！
(http:/farm4.staticflickr.com/3707/8754266312_7921962613_b.jpg Mac で表示
本当に正直なところ、今行き詰まっています。何が欠けているのか、何が間違っているのでしょうか? どんな助けでも大歓迎です。
どうもありがとう