边境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),上面的代码将不起作用,但原理是相同的.你不能使用,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;
}

任何一个都应该工作.