bootstrap 4 下输入组背景的错误

Question

我有一台win11下的新电脑@chromev97.

原始的bootstrap代码导致了一个错误，如您在附件中所见。 It occurs on the bootstrap website

如果我将“border-radius:0!important”添加到“.input-group-text,”，问题就解决了，但不再四舍五入，这是不可接受的。

我认为这更多是我电脑的配置问题，而不是 CSS 的错误。

有什么想法吗？

<div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>

<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
</div>

Answer 1

终于找到解决方法了！

问题与 bootstrap 没有直接关联。下面的代码会导致完全相同的问题：

<style>
    #test{
        border: 2px solid black;
        border-radius: 3px;
        display: block;
        height: 56px;
        width: 195px;
        background: red;
    }
</style>
<div id="test">This is a test</div>

解决问题：

打开 Google Chrome 设置。
转到“高级”菜单。
Select 系统.
禁用硬件加速切换。

bootstrap 4 下输入组背景的错误

bug with input-group background under bootstrap 4

css

bootstrap-4

windows-11