边境px问题

Question

目前我有一个1px的边框，它包裹了我发布的每个职位。我的问题是，在我放置红色徽标的底部，1 px的重叠形成了比其余部分更粗的线（2px）。如何修复此问题，但在打开每个页面时仍保留完整边框。谢谢参观。

http://jobspark.ca/job-listings/

更新CSS

article .post {
border: 1px solid #e3e3e3;
border-top: none;
}

article.article-index-null .post,
article.article-index-1 .post {
border-top: 1px solid #e3e3e3;
}

更新 现在只有当你点击并打开一个页面“部件人”时，例如缺少顶部边框。 http://jobspark.ca/job-listings/2013/6/3/wellsite-trailer-energy-services-technician

Answer 1

除了第一个帖子之外，只需删除每个帖子的顶部边框：

article .post {
    border: 1px solid #e3e3e3;
    border-top: none;
}
article .post:first-child {
    border-top: 1px solid #e3e3e3;
}

修改：因为您的html结构中包含一系列article元素，每个元素中都有一个.post（而不是.post个元素中的一系列article元素{1}}，正如我所假设的那样，上面的代码不起作用，但原理是一样的。你不能使用article:first-child，因为有另一个兄弟元素是第一个孩子，但由于你给第一篇文章一个特定的类名，你可以使用它，如下所示：

article .post {
    border: 1px solid #e3e3e3;
    border-top: none;
}
article.article-index-1 .post {
    border-top: 1px solid #e3e3e3;
}

第二次修改：由于您在项目视图和列表视图中重复使用相同的html，但不希望在项目视图中删除顶部边框，请执行以下操作：

article .post {
    border: 1px solid #e3e3e3;
}
.view-list article post {
    border-top: none;
}
.view-list article.article-index-1 .post {
    border-top: 1px solid #e3e3e3;
}

或者，因为在您的单元视图中，您已经为文章提供了“article-index-null”类，您还可以执行以下操作：

article .post {
    border: 1px solid #e3e3e3;
    border-top: none;
}
article.article-index-null .post,
article.article-index-1 .post {
    border-top: 1px solid #e3e3e3;
}

任何一个都应该工作。

Answer 2

更改为：

article .post {
  padding: 12px 16px;
  border: 1px solid #e3e3e3;
  border-bottom: none;
  background: white;
}

并添加：

article .post:last-child { 
  border-bottom: 1px solid #e3e3e3;
}

Answer 3

有几种方法可以做到这一点。我会用<div>包装整个文章部分，只有1px的顶部边框，没有填充。然后每篇文章只需要左，右和底部边框来实现你想要的外观。

article .post {
padding: 12px 16px;
border-left: 1px solid #e3e3e3;
border-right: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
background: white;
}

Answer 4

使用border-left border-right和border top，而不是使用border？ 似乎这样可以解决您的问题。