Question

有两个小错误＆＃34;当我渲染CSS标签时。如果按第三个选项卡，则左侧的垂直线消失。在semantic-ui手册中的示例中，当我按下＆＃34;第三个＆＃34;时，它不会发生并且该线就在那里。我想知道代码有什么问题。

＆＃13;

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

＆＃13;

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

＆＃13;

如果你比较按＆＃34; second＆＃34;到第三个＆＃34;那么左边的垂直线消失了，不应该这样做。你能找到错误吗？

Answer 1

如果你查看.ui.attached.segment类形式semantic.min.css，它有一个边距：0 -1px，它在-1px左右添加一个边距。

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

一个简单的解决方法是将0px的右/左边距添加到第三个标签

小奇怪的渲染bug

1 个答案: