html - 在 CSS 属性中使用 !important 不好吗？

Question

我对 CSS 知之甚少(我纯粹是一名 Java/J2EE 开发人员)，但不知何故我陷入了一个我无法解决的 CSS 难题解决。

我正在使用一个带有 jQ​​uery 灯箱效果的表单，它有一个带有 id 和 class 的 div:

<div id="contact-container"
     class="myclass"
     style="z-index: 1002; height: 386px; width: 450px; position: fixed; left: 406.5px; top: 15%; ">

在我的 CSS 文件中，我使用了以下条目:

#contact-container {
    font: 16px/22px 'Trebuchet MS', Verdana, Arial;
    text-align:left;
    width:450px;
}

但是当此表单显示为 jQuery 弹出窗口时，它在 Mozilla 中可以正常显示，但在 Google Chrome 和 IE 中该框无法正常显示:只有一部分显示，并通过滚动条隐藏栏。

当我通过 firebug 看到它时(我第一次使用它 :))，它向我展示了如下内容:

<div id="contact-container"
     class="myclass" 
     style="position: fixed; z-index: 1002; height: 67px; width: 450px; left: 406.5px; top: 15%;">

对于相同的设置，IE 和 Mozilla 无法正常运行。经过大量谷歌搜索后，我对我的 CSS 进行了以下更改:

#contact-container {
    font: 16px/22px 'Trebuchet MS', Verdana, Arial;
    text-align:left;
    width:450px;
    height:380px !important;
}

我使用 height:380px !important; 固定了高度，但对 CSS 了解不多，我不确定这是否是正确的方法，因为我搜索了高度但没有定义任何地方。

如果我采用了错误的方法，请提出建议。

Answer 1

!important 是一个有用的工具，但缺点是它是一种不得已的工具。因此，您不希望过度使用它，因为这最终会给维护网站的任何人带来麻烦。

但是，您的示例是典型用法。正在发生的事情是 JS 正在动态注入(inject)内联样式属性。因此，它覆盖了 CSS 中的级联。 !important 允许您覆盖它。