使用不好!在css属性中很重要

Question

不太了解css和纯粹的Java/J2EE开发人员,但有些人如何在一些css 我无法解决的难题中受到打击

我是使用一种形式与一些Jquery的灯箱效果,其具有div与id和class

<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没有正确使用,所以经过大量的Goggling后我做了更改 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正在动态注入内联样式属性.因此,这会超过CSS中的级联.!important允许你超越那个.

Answer 2

!important是有效的CSS语法,使用它是没有错的 - 前提是你了解它正在做什么以及它为什么解决你的问题,以便你以正确的方式使用它.

CSS代表Cascading Style Sheets.对于相同的选择器,您可以加载多个相互叠加的样式,包括单个CSS文件和多个CSS文件.CSS文件中的后续规则优先于先前的规则,后面的CSS文件中的规则优先于先前文件中的规则.这就是级联.

您可以认为!important将特定规则移动到位于其他规则之上的特殊层 - 仍然受级联影响,但它只会被也标记的后续规则覆盖!important.这使您可以将要优先规则较早在级联哪里,这是合乎逻辑的.最明显的例子是确保硬编码样式表中的规则仍然优先于在加载时由javascript动态插入的规则......而这正是您在这里所做的.适当使用.

当然,可能有另一种方法来解决您的问题 - 例如使用更具体的选择器来定位属性.但是有些情况下,更改可用的选择器并不足以实现此功能,并且更改生成的html以添加其他选择器可能过多(例如,标记是由内容管理系统动态生成的,不允许轻松定制html的那一部分).在这种情况下,使用!important可能更方便,更实用,并且在这种情况下比替代方案更容易维护.

Answer 3

我认为，这绝对是错误的做法。

维护!important分散在各处的站点是一场噩梦。如果您觉得需要使用!important，对我来说，您需要重新了解CSS的特殊性。

它们之所以被称为级联:)

Answer 4

使用 !important for development 快速识别级联中的问题，然后修复问题。最好在 CSS 规则中使用最少的特殊性来使某些东西起作用。无论如何，在投入生产之前删除 !important 规则问题。