Question

奇怪的问题：

＆＃13;

         .nav_active {
           padding: 8px 0 8px 0;
           border-top: 5px solid #2778ad;
           border-bottom: 5px solid #2778ad;
           border-left: none;
           border-right: none;
         }

＆＃13;

 <span class="nav_active"><a class="active" href="/home">Home</a></span>

＆＃13;

在FF中这很好用，有两个5px边框，距离顶部和底部的链接有8px的距离。在chrome中，线条指向链接文本。如果我在左侧和右侧制作边框，它也适用于镀铬。

任何人都知道为什么这对Chrome不起作用？

Answer 1

使用block or inline-block元素：

.nav_active {
  padding: 8px 0 8px 0;
  border-top: 5px solid #2778ad;
  border-bottom: 5px solid #2778ad;
  border-left: none;
  border-right: none;
  display: inline-block;/*now padding-top,padding-bottom gets affected properly*/
}

Answer 2

边界确实在显示，但它在窗外。这是＆＃34;推动＆＃34;在可视区域之外（全屏的浏览器窗口/正文，SO上的代码段预览框）。

为了证明这一点，让我们将整个事情推下10px：

＆＃13;

.nav_active {
    position: relative;
    top: 10px;
    margin-top: 10px;
    padding: 8px 0 8px 0;
    border-top: 5px solid #2778ad;
    border-bottom: 5px solid #2778ad;
    border-left: none;
    border-right: none;
}

＆＃13;

<span class="nav_active"><a class="active" href="/home">Home</a></span>

＆＃13;

Answer 3

我也遇到了同样的问题，但仅限于野生动物园，并解决了添加“ position：relative”的问题

.nav_active {
       padding: 8px 0 8px 0;
       border-top: 5px solid #2778ad;
       border-bottom: 5px solid #2778ad;
       border-left: none;
       border-right: none;
       /*Added this line*/
       position:relative;
}

边缘没有显示在chrome / safari中

3 个答案: