html - 边框像素问题

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每个元素都有一个（而不是我假设的 a 中的一系列.post元素article），所以上面的代码不起作用，但原理是一样的。您不能使用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

有几种方法可以做到这一点。<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 3

改成这样：

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

并添加：

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

Answer 4

除了使用边框，使用边框左边框右和边框顶部怎么样？似乎这正在解决您的问题。