码迷,mamicode.com
首页 > Web开发 > 详细

如何让后加载的元素被一开始就有的css样式渲染成功(强制提升css优先级)

时间:2015-02-14 14:55:19      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:

今天在做搜索框中的提示语下拉的时候,提示框把搜索框的底部的border遮住,导致看起来不是很美观:

技术分享

因为下方的提示框是用js后加载的它的样式也是随着js一起加载的,而这个js和它的css我们是不能改动的。如果直接一开始就使用css设置,卸载首页的css文件中,当focus输入框的时候,输入框的css是后加载进来以及渲染的,以至于我们看到的结果是一开始写在首页css文件中的样式被后面加载的样式覆盖了:

方案一:使用js定时器,当focus后延时一会儿大概255ms左右,再来渲染提示框的上边框颜色,亲测可用。

方案二:使用层级,给搜索框的的zIndex设置比较高的值,这样永远在提示框的上层,我还没试过,不知行不行。

方案三:这是一位同事”新强“找到的解决方式,使用强制提升css的优先级,这个方法也是可用!

 #zSearchSuggest{ border-top:1px solid red !important;}

  当然,实际做的时候是把red化成相应的蓝色。

如何让后加载的元素被一开始就有的css样式渲染成功(强制提升css优先级)

标签:

原文地址:http://www.cnblogs.com/ishenghuo/p/4291523.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!