放置在小部件中时，Wordpress <img> 样式被覆盖答案

【问题标题】：Wordpress <img> style is being overridden when placed in widget放置在小部件中时，Wordpress <img> 样式被覆盖
【发布时间】：2017-06-16 13:24:23
【问题描述】：

我正在创建一个绘制条形码的 WP 小部件。当我将它放在管理页面上时，我可以生成一个工作正常的条形码（à la Hello Dolly！）。

构成条形码的标签明确设置了条形和空格的高度和宽度，每个人都很高兴。

当我将相同的插件代码应用于小部件时，宽度保持不变，但高度由于某种原因被缩小了。

结果是一个大约 1 像素高的条形码无法正确扫描。我有兴趣找出为什么/如何在小部件类中覆盖我的显式样式。

编辑：插件中包含的唯一 css 在这里：

// We need some CSS to position the paragraph
function barcode_css() {
        $x = is_rtl() ? 'left' : 'right';

        echo "
        <style type='text/css'>
        #barcode {
                float: $x;
                padding-$x: 15px;
                padding-top: 5px;
                margin: 0;
                font-size: 11px;
        }
        </style>
        ";
}

【问题讨论】：

标签： html css wordpress barcode barcode-printing

【解决方案1】：

您是否尝试将 !important 添加到您的 css 中？

【讨论】：

我搞定了。您的建议使我走上了正确的道路，但我不需要使用！important。我使用内联样式，而不是尝试直接设置高度和宽度属性并依靠 css 来整理。
这并不是问题的最佳答案。尽量避免以您的风格使用!important，除非这是唯一可能的方式。阅读：stackoverflow.com/questions/3706819/…

【解决方案2】：

它现在正在工作。根据这个答案，我没有尝试显式设置高度和宽度的属性，而是使用内联 CSS： https://stackoverflow.com/a/15000373/769938

一旦我调整了小部件的 php，它就开始工作了。

【讨论】：