我的小部件的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"> 

有overflow: hidden，這就是爲什麼「x」被切斷。我想如果你這樣做：

#cfwContainer { overflow: visible !important; } 

它會工作。

第二個問題是box-sizing: border-box在第二頁上的所有元素上設置。如果您在所有小部件元素上明確設置box-sizing: content-box，它將保持所有大小。