HTML 位置在 Mac 和 PC 上相差 1px

Question

我的问题与 margin 定位有关。似乎我正在处理的网站在 PC 和 Mac 上的解释不同，但我不明白为什么。我在这里的论坛上进行了搜索，但似乎没有任何帮助。

问题可见于:http://lucaskriebel.com/blog/dev/post.html

图像应与模糊背景对齐，在 PC 上也是如此，但在 Mac(Firefox、Chrome 和 Safari)上，它比线高 1px。

我设置它的方式是模糊背景是它在 div 上，然后我通过为 margin-top 设置负值(具有比模糊背景更大的 z-index)来向上移动帖子内容所以它出现在模糊的背景之上。

这是相关的 HTML/CSS

模糊背景 HTML:

<div id="post_media_permalink_container">

    <div id="post_media_permalink"></div>

</div>

模糊背景 CSS:

#post_media_permalink_container {
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    height: 699px;
    overflow: hidden;
    background-image: url(../images/post_photo.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
}
#post_media_permalink {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f2f4f6;
    background-size: cover !important;
    opacity: 0;
}

content_permalink CSS:

#content_permalink {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 50;
    margin-top: -608px;
}

我不确定问题是否出在这些元素上，但我认为确实如此。希望一些 HTML/CSS 专家可以提供帮助。

Answer 1

正如我在 Mac(Opera 和 Safari)上测试过的，您所说的图像在模糊背景线下方 1px。在 PC (IE10) 上，它也在这条线下 1px。这可以通过将您的 post_media 图像 CSS 类编辑为此来解决:

.post_media img {
width: 916px;
height: auto;
margin-bottom: -6px; /* Instead of -5px */
}

这似乎解决了问题。