html - 我的小部件的 css 在不同网站上的计算方式不同

Question

我开发了一个小部件，可将动态 html 插入到主机网站的 div 中。小部件的 html 和 css 加载在主机页面中，而不是 iframe。

这是在我的网站http://crocofan.com上正确加载的小部件，这是用户网站http://www.mylittlechickblog.com上的小部件（等待 20 秒以使其显示）。

您可以看到小部件白色框的宽度和高度错误，并且右上角的“X”符号未正确显示。

我可以做些什么来使它在这个网站上以及在每个网站上都能正确显示？非常感谢！

Answer 1

有几个问题。一：

<div id="text-17" class="widget widget_text">

has overflow: hidden，这就是“x”被切断的原因。我想如果你这样做：

#cfwContainer { overflow: visible !important; }

它会起作用的。

第二个问题是box-sizing: border-box设置在第二页上的所有元素上。如果您box-sizing: content-box在所有小部件元素上明确设置，它将保持所有大小。