HTML元素在Mac上的位置正确，但在PC上则不正确

Question

我使用了绝对定位来将元素放置在图像的底部，它在Mac上看起来很棒，但在我的PC上定位过高，即使在两台计算机上使用相同的浏览器时也是如此。在绝对定位HTML元素时，使用百分比、像素、em或英寸是最好的吗？我对网络编程还比较陌生，所以任何一般性的建议都是受欢迎的。谢谢

HTML:

<div class = "article">
    <div class="title" onclick = "$('.aboutMe').fadeIn(500)">
            <p class = "slide"> ABOUT ME </p>
    </div> 
    <header>
        <h1> RAMON MIGUEL "RMI" FLORES </h1>
        <h2> Welcome to my personal website! </h2>
    </header>
    <img src = "tahoe2.jpg" alt = "Dorm Trip to Tahoe" title "Lake Tahoe" id = "tahoe">
    <div class = "subImages">
        <img src = "profile.jpeg" alt = "Profile Picture" id = "profile" onclick = "$('.aboutMe').fadeIn(500)"> 
        <div class="title" id = "socialTitle" onclick = "$('.socialMedia').fadeIn(500)">
            <p class = "slide"> SOCIAL MEDIA </p>
        </div> 
        <img src = "basketball.jpeg" alt = "Me Dunking" id = "basketball" onclick = "$('.socialMedia').fadeIn(500)">
        <div class="title" id = "contactTitle" onclick = "$('.contactMe').fadeIn(500)">
            <p class = "slide"> CONTACT ME </p>
        </div> 
        <img src = "contact.jpeg" alt = "Contact Me" id = "contact" onclick = "$('.contactMe').fadeIn(500)">
    </div>
    <footer>
        <p> &copy Ramon Flores 2012 </p>
    </footer>
</div>

CSS：

    body {
        background-color: #EDEDF3;
    }
    .article {
        border: 1px solid rgba(255, 204, 204, 0.25);
        background-color: #FFF;
        width: 80%;
        margin: 20px auto;
        padding: 0 20px;
        -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        border-radius: 25px;
        -moz-border-radius: 25px;
    }
    h1 {
        font-size: 65px;
        font-family: 'Quicksand', sans-serif;
        font-weight: 100;
        text-align: center;
        color: #333;
        text-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
        letter-spacing: 0;
        margin-bottom: 0;
    }
    h2 {
        font-size: 20px;
        font-family: 'Raleway', 'Quicksand', sans-serif;
        font-weight: lighter;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
        text-align: center;
        color: black;
        letter-spacing: 0;
    }
    #tahoe {
        width: 98.7%;
    }
    .article img {
        border: 5px solid #EDEDF3;
    }
    #profile, #basketball, #contact {
        width: 32%;
        height: 4.7in;
        border-radius: 25px;
        -moz-border-radius: 15px;
    }
    .subImages {
        display: inline;
    }
    footer {
        font-size: 15px;
        color: #B28F8F;
        text-align: center;
        font-family: 'Raleway', sans-serif;
    }
    footer p:hover { 
        color: black; 
        -webkit-transition: all 0.5s ease-in;
        -moz-transition: all 0.5s ease-in;
        -o-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;   
    }
    .title {
        background-color: #66CCFF;
        width: 26%; 
        color: white;
        font-family: 'Quicksand', sans-serif;
        text-align: center;
        font-size: 30px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        -moz-border-bottom-right-radius: 20px;
        -moz-border-bottom-left-radius: 20px;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 1127px;
    }
    #socialTitle { left: 36.9%; }
    #contactTitle { left: 63.3%; }

如果有很多代码，很抱歉。我是个新手，不知道问题出在哪里，所以我只是发布了很多。我想把".title"元素放在".subImages"类中3张图片的底部。这在Mac上的所有浏览器上都能很好地工作，但".title"元素在PC上所有浏览器上的位置都太高了。非常感谢您的帮助！

Answer 1

使用像素还是英寸并不重要：如果希望元素位于底部，请使用bottom: 0；

请看这个fiddle，图像位于容器div中。标题位于图像上方，位于容器底部。我使用了一种颜色和半透明，所以你可以看到标题实际上位于"图像"上方。

http://jsfiddle.net/GolezTrol/wp3Fd/