Question

我的问题与保证金定位有关。我正在研究的网站似乎在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 */
}

这似乎解决了这个问题。

Answer 2

看起来这种情况正在发生，因为.post_media元素的计算高度因浏览器+操作系统而异。

尝试添加以下CSS规则以确保它始终为608px（而不是607px或609px），这应该确保它始终排成一行。

.post_media {
    height: 608px;
    max-height: 608px;
}

Answer 3

就像Cody Bonney的回答一样，我认为.post_media课程的高度可以限制在608像素，但由于你已经拥有#content_permalink的风格，你也可以尝试这个修复。

#content_permalink {
   margin-top: -609px;
}

HTML在Mac和PC上的位置差异1px

3 个答案: