边框在 Chrome 中被剪掉，但在 IE 或 Edge 中没有答案

【问题标题】：Border clipped off in Chrome but not IE or Edge边框在 Chrome 中被剪掉，但在 IE 或 Edge 中没有
【发布时间】：2019-04-30 22:44:57
【问题描述】：

此 CSS 和 HTML 显示三个文本框，当在 IE 和 Edge 中查看时，它们的边框完全包裹起来。在 Chrome（或我的 Android 浏览器）中查看时，边框的右侧会被剪掉。

我可以通过在每个跨度后面添加一个尾随“ ”来使其工作，但我宁愿了解我是否做错了什么......

<html>
<body>
<style>
.link-bubble {
    float:none;
    white-space:nowrap;
    border: thin solid blue;
    border-radius:10px;
    background-color:antiquewhite;
    padding:4px 6px 6px 6px;
    margin:2px;
}
</style>
<div style="float:right; width:30%; text-align:center; line-height:40px;">
    <span class="link-bubble">
        <a href="/Services/target1">First service offered</a>
    </span>
    <span class="link-bubble">
        <a href="/Services/target2">Second service offered</a>
    </span>
    <span class="link-bubble">
        <a href="/Services/target3">Third service offered</a>
    </span>
</div>
</body>
</html>

【问题讨论】：

似乎与div 上的width:30%; 有关。

标签： html css google-chrome internet-explorer microsoft-edge

【解决方案1】：

我不能 100% 确定为什么会发生这种特定行为以及浏览器之间的差异，但我敢打赌这与 white-space:nowrap 和父元素 width: 30% 以及一些古怪之处有关。

与其试图解决这个怪癖，更简单的方法是将.link-bubble 的display 从inline 更改为block。您可以使用类上的display: block 来执行此操作，或者只需将元素从span 更改为div 或其他块元素。 Here's some good reading on the box model - 我还建议阅读 css flexbox 和 grid，更简单、更现代的方式来处理元素与 div 和 float 的定位。

另外，如果您真的需要white-space: nowrap，请将该样式添加到内部元素中。请参阅下面的示例。

<html>
<body>
<style>
.link-bubble {
overflow: hidden;
border: thin solid blue;
border-radius:10px;
background-color:antiquewhite;
padding:4px 6px 6px 6px;
display: block;
margin: 2px;
}

.link-bubble a { white-space: nowrap; }
</style>
<div style="float:right; text-align:center; width: 30%; line-height: 40px;">
    <span class="link-bubble">
        <a href="/Services/target1">First service offered</a>
    </span>
    <span class="link-bubble">
        <a href="/Services/target2">Second service offered</a>
    </span>
    <span class="link-bubble">
        <a href="/Services/target3">Third service offered</a>
    </span>
</div>
</body>
</html>

【讨论】：

感谢您的回复。客户想要页面右侧的链接集合，这些链接基本上是“圈起来的”。每个链接可以有不同的大小，不能分成两半（因此空白：nowrap;）所以第一行可能包含 5 个链接，第二行 2，第三行 4，所有这些都会随着客户端重新调整窗口大小。显示：块；强制固定宽度的列与最宽的文本一样宽 - 这样就出来了。我以前从未使用过 flexbox - 感谢您的提示 - 我将来肯定会使用它，但在这种情况下，它也会强制使用固定宽度的列。
没问题 - 如果您发现答案有用，您能否将其标记为已接受以关闭它？
现在我想看看是否有其他人可以解释为什么会发生这种情况，以及我可以做些什么来使它像（显然）设计的那样工作——而不强制块布局。我认为我还没有准备好关闭它，但再次感谢您的指导。