邊框線只適用於Chrome

我在Chrome上開發網站並在Mozilla中檢查後，我很驚訝，因爲<a>元素的邊框線不起作用。在IE中同樣的問題。這裏可能是什麼問題？邊框線只適用於Chrome

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;}

來源

2016-09-30 Dandy

有與Mozilla的邊界問題。據我所知，解決方案可能是通過添加圖像作爲邊界。但仍在研究。 –

試試這個

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

來源

2016-09-30 12:55:03

顯示：表影響邊框，以便添加邊框父。

添加下面的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; 
}

來源

2016-09-30 13:02:48 Dhaarani

@Dandy現在檢查它。如有任何疑問，請告知我。 – Dhaarani

邊框線只適用於Chrome

回答

相關問題