Question

我正在Chrome上开发一个网站，在Mozilla中检查后，我感到很惊讶，因为<a>元素的边界线不起作用。 IE中也存在同样的问题。这可能是什么问题？

HTML：

<?php query_posts(array('showposts' => 40, 'post_parent' => $this_page_id, 'post_type' => 'page', 'order' => 'ASC')); while (have_posts()) { the_post(); ?>
<div class="col-sm-4 grid"> 
        <a class="grid-item" href="<?php the_permalink(); ?>" style="background-image:url(<?php the_post_thumbnail_url( 'medium' ); ?> );">
                <div class="center">
                        <h3><?php the_title(); ?></h3>
                </div>
                <div class="overlay"></div>                              
        </a>
</div>

CSS：

a.grid-item {border-right:1px solid #eee;border-top:1px solid #eee;}
.grid:nth-child(3n+1) a.grid-item{border-left:1px solid #eee;}

Answer 1

试试这个

jQuery("a.grid-item").css({"border-right":"1px solid #eee","border-top":"1px solid #eee"});

Answer 2

display：table会影响边框，因此请将边框添加到父级。

将以下css添加到您的代码中

.grid:nth-child(3n+1) {
   border-left: 1px solid #eee;
}

.grid {
   border-right: 1px solid #eee;
    border-top: 1px solid #eee;
 }

将以下css删除到您的代码

.grid:nth-child(3n+1) a.grid-item {
   border-left: 1px solid #eee;
}
a.grid-item {
   border-right: 1px solid #eee;
   border-top: 1px solid #eee;
}

边框线仅适用于Chrome

2 个答案: