小奇怪的渲染错误

Question

当我渲染 CSS 标签时，有两个小 "bugs"。如果我按下第三个选项卡，那么左边的垂直线就会消失。在 semantic-ui 的手册中的示例中，它不会发生，当我按 "third" 时，该行就在那里。我想知道代码有什么问题。

$(function () {
   $('.menu .item').tab();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
<div class="ui top attached tabular menu">
  <a class="item active" data-tab="first">First</a>
  <a class="item" data-tab="second">Second</a>
  <a class="item" data-tab="third">Third</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="first">
  First
</div>
<div class="ui bottom attached tab segment" data-tab="second">
  Second
</div>
<div style="margin-right:0px;margin-left:0px" class="ui bottom attached tab segment" data-tab="third">
  Third
</div>

如果你比较按 "second" 和 "third" 那么左边的垂直线会消失，这是不应该的。你能找到错误吗？

Answer 1

如果您查看 .ui.attached.segment class 形式 semantic.min.css ，它有一个 margin: 0 -1px，它在左右添加了 -1px 的边距。

对于第二个选项卡，此页边距似乎被 .ui.tabular.menu+.attached:not(.top).segment+.attached:not(.top).segment 覆盖，而对于第三个选项卡则没有覆盖。

一个简单的解决方法是将 margin-right/left 的 0px 添加到第三个选项卡

小奇怪的渲染错误

Small strange rendering bug

javascript

css

rendering

semantic-ui