HTML5中CSS的宽度设置百分比无效,以及禁用important的方法

        最近在研究17模板的那个WAP独立版程序第二套原创模板,发现有一个问题,就是首页的那个封面在uc浏览器的情况下存在错位严重的问题,在谷歌浏览器的手机模式下调试,也是一样的问题,看样子是高度没有限制好,我就想着把高度也进行限制百分比,或者限制像素,可是实际中发现,都不顶用,用谷歌浏览器的开发模式下发现,无论怎么调,height的数值都被限制了,而且是在important中进行了限制,可是我通过查看css文件,根本没有看到important在哪个地方。

        通过谷歌模式的调试,我把height进行了更改,图片的错位现象就得到了改正,这样就发现了问题,还是在宽度的问题下,然后更改了又被important限制,我就想能不能够进行限制了,百度了一下,果然能够进行限制,只需要在后面加! important就行,经过测试果然能够进行更改height了,具体的可以看看下面的代码。

       比如我有个代码是这样的 #tj img{width:100%;},我想先进行限制了,然后添加width的限制,可以更改为这样#tj img{width:100%;height: 200px ! important;},这一个的意思就是,首先把important的属性禁掉,然后设置height的数值为200像素,这样就能够完美解决了。

        不过有一个问题,不要用百分比,百分比无论你设置多少,都是不生效的,因为浏览器不能界定。

timg.jpg

        下面再附上一点网上找的干货:

CSS的原理:

我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素style中的属性,但是如果使用!important,事情就会变得不一样。

首先,先看下面一段代码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试Css中的!Important区别</title>
</head> 
<style type="text/css">
.testClass{ 
color:blue !important;
}
</style>
<body>
    <div class="testClass" style="color:red;">
        测试Css中的Important    
</div>
</body>
</html>

虽然元素的style中有testClass类的定义,但是在上面的css定义中的用!important限定的定义却是优先级最高的,无论是在ie6-10或者Firefox和Chrome表现都是一致的,都显示蓝色。

这种情况也同时可以说明ie6是可以识别!important的,只是这个是ie6的一个缺陷吧。如果写成下面的样式,ie6是识别不出来的:

.testClass{ 
color:blue !important;
color:red;
}

这样,在ie6下展示的时候会显示成红色。

当然,也可以通过以下方式来让ie6识别:

.testClass{ 
color:blue !important; 

.testClass{ 
color:red; 
}

通过以上方式也是可以让ie6显示成蓝色的。

以上实例说明使用!important的css定义是拥有最高的优先级的。只是在ie6下出了一点小的bug,注意书写方式一般可以轻松避开的。

        有什么问题可以在下面进行留言,大家一起进行学习交流。

发布者:彬彬笔记,转载请注明出处:https://www.binbinbiji.com/css/1918.html

(0)
彬彬笔记彬彬笔记
上一篇 2020年3月19日
下一篇 2020年3月19日

相关推荐

发表回复

登录后才能评论
蜀ICP备14017386号-13