我正在向我的用户提供一个小部件。它们在脚本标签中包含我的 JS api。一旦他们<div class="PutWidgetHere" />的身体标签中有一个，我的目标是在 div 内呈现一个图像和一个文本框。
我的 JS api 找到了divwith class=PutWidgetHere。它附加一个图像元素，然后附加一个input type=text元素。输入必须放在图像的中心，所以我使用相对于 div、z-index 和其他几个 css 属性的绝对定位。
总而言之，我可以在空白页上完成这项工作。但是，如果我将我的小部件集成到一个填充页面上，比如 StackOverflow 的主页，事情就会变得丑陋。它仍然有效，但看起来很难看。主要是因为我的输入文本继承了页面的 CSS 属性，例如填充、边距、悬停等。
如何防止页面弄乱我的小部件？
经过研究，我发现您不能禁用元素的 CSS 属性继承。对于填充和边距，我可以使用 !important 覆盖它们，但我不能对我的输入可以继承的所有可能的 CSS 属性执行此操作？
我想在 div 中放置一个 iframe。但这使得我的图像和输入元素无法与主机页面对话。另外，承载图像和按钮的 iframe（无边框）可能会与父页面混淆？
欢迎任何关于如何将我的输入文本与父 CSS 隔离的建议:)