时间戳

首页 > 解决方案 > iframe 设置错误的宽度

javascript - iframe 设置错误的宽度

问题描述

我有一个具有 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 会产生问题。如果我删除引导 CSS 而不是 iframe 工作正常。我使用的引导版本是 4.3.1

标签： javascriptjqueryhtmlcssiframe

解决方案

问题是由于从引导程序继承的 CSS 属性。

该物业是：

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

我将其更改为：

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

现在 iframe 设置我分配的确切值

推荐阅读