javascript - iframe 设置了错误的宽度

Question

我有一个包含 iframe 的页面，其宽度是从 jquery 动态分配的。无论我通过 jquery 设置什么宽度，该值都会自动递增并分配给 iframe。我不明白它是如何变化的，在哪里变化的。

$("#contentViewer").width("1023px");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <iframe id="contentViewer"></iframe>
</div>

在浏览器中呈现的元素(从浏览器检查元素复制的 HTML)

<iframe id="contentViewer" style="width: 1026.98px;"></iframe>

我希望 iframe 宽度为 1023px，但呈现的 iframe 宽度为 1026.98px

在检查外部 CSS 包含时，我了解到引导 CSS 会产生问题。如果我删除 bootstrap CSS 而不是 iframe 工作正常。我使用的bootstrap版本是4.3.1

Answer 1

问题是由于从 bootstrap 继承的 CSS 属性。

属性是:

*, ::after, ::before {
    box-sizing: border-box;
}

我把它改成:

iframe, ::after, ::before {
    box-sizing: unset;
}

现在 iframe 设置我指定的确切值