在CSS属性中使用！important是否不好?

问题描述

我对CSS不太了解(我纯粹是Java/J2EE 开发人员)，但是我却以某种方式无法解决 CSS 难题解决.

I don't know much about CSS (I'm purely a Java/J2EE developer), but I somehow got stuck with a CSS puzzle which I am unable to solve.

我正在使用具有jQuery灯箱效果的表单，该表单具有 div 和 id 和 class :

I was using a form with a jQuery light box effect which has a div with an id and a class:

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

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

In my CSS file, I'm using the following entry:

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

但是当此表单显示为jQuery弹出窗口时，它已在Mozilla中正确显示，但是在Google Chrome和IE上，该框未正确显示:仅显示了其中一部分，并用滚动条隐藏了酒吧.

But when this form was displayed as jQuery pop-up, it was getting displayed properly in Mozilla, but on Google Chrome and IE the box was not coming properly: only part of it was being displayed, and was hidden with a scroll bar.

当我通过萤火虫看到它时(我第一次使用它:))，它向我显示了类似的东西:

When I saw it through firebug (my first time using it :)), it's showing me something like:

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

，对于相同的设置，它不适用于IE和Mozilla.经过大量的Google搜索之后，我对 CSS 进行了以下更改:

and for the same settings, it was not coming properly for IE and Mozilla. After lots of Googling, I made the following changes to my CSS:

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

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

I fixed the height using height:380px !important;, but not knowing much about CSS, I am not sure if this was the right approach, as I searched about height but it was not defined anywhere.

请建议我是否采用了错误的方法.

Please suggest if I have adopted a wrong approach.

推荐答案

！important 是有用的工具，但缺点是它是不得已的工具.因此，您不想过度使用它，因为它最终会使维护该网站的任何人头痛不已.

!important is a useful tool, but the drawback is that it's kind of a tool of last resort. So you don't want to over-use it as you'll end up causing headaches down the road for anyone that's maintaining the site.

但是，您的示例是一种典型用法.发生的情况是，JS正在动态注入内联样式属性.因此，这超越了CSS中的级联.！important 使您可以覆盖它.

However, your example is a typical use. What is happening is that the JS is injecting inline style attributes on the fly. As such, that's over-riding the cascade in your CSS. !important allows you to over-ride that.

这篇关于在CSS属性中使用！important是否不好?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！