border-bottom dotted在Chrome的开头/结尾处有实线

Question

我创造了一个小提琴来说明这一点：https://jsfiddle.net/9tu8n4y5/

标记非常简单，因为它应该看起来像一条虚线来分隔内容：

function top_news(){
     $args = array (
        'limit' => 15,
        'range' => 'daily',
        'freshness' => 1,
        'order_by' => 'views',
        'post_type' => 'post',
        'stats_views' => 1,
        'stats_author' => 1,
        'stats_date' => 1,
        'wpp_start' => '<table class="topnachrichten"><tr><th>Datum</th><th>Top Nachrichten von Heute</th><th>Leser</th></tr>',
        'wpp_end' => '</table>',
        'stats_date_format' => 'd',
        'excerpt_by_words' => 1,
        'excerpt_length' => 35,
        'title_length' => 66,
        'post_html' => '<tr><td class="datum">{date}. Aug</td><td class="stext"><details>
        <summary><a href="{url}">{title}</a><span class="plus">+</span></summary>{summary}<br><a href="{url}">Weiterlesen</a></details></td><td class="views">{views}</td></tr>'
    );

    ob_start();
    wpp_get_mostpopular( $args );
    $output = ob_get_contents();
    ob_end_clean();

    return $output;
}
add_shortcode( 'topnews', 'top_news' );

在Firefox 55.0.3中，这看起来像我期望的那样：

但是，在Chrome 61.0.3163.91中，它在开头和结尾都有一个奇怪的“实线”：

更紧密：

有没有人有任何想法为什么会这样？我想这是一个浏览器特定的问题，用CSS无法改变？

我正在使用27“5k Retina iMac。但是我的第二个显示器是非Retina屏幕，结果是相同的。

Safari 10.0.3提供与Firefox相同的结果。

编辑（发布后） - 向Chromium Bugs团队报告，https://bugs.chromium.org/p/chromium/issues/detail?id=766977

Answer 1

我还没有在视网膜上测试过这个解决方案，但你可以使用半径值来完全/接近你想要的。这就是我处理错误的方法：

.border-bug {
  border-bottom: 2px dotted red;
}

.no-border-bug {
   border-bottom: 2px dotted red;
   border-left: 2px solid transparent;
   border-top: 1px solid transparent;
   border-radius: 4px 1px 3px 3px;
}

<div class="border-bug">
Bug Bug Bug.
</div>
<br>
<div class="no-border-bug">
Almost no bug.
</div>

这个错误似乎已经存在了很久。

Answer 2

您好，Just发现了一个解决方法：将Css属性border-collapse: separate;添加到表中，它将正常工作。