今天在做搜索框中的提示语下拉的时候,提示框把搜索框的底部的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优先级)的更多相关文章

  1. 网页移动到一个高度后加载网页元素【getBoundingClientRect好用】

    $(window).scroll(function () { var windowH = $(window).height();//取可视窗口的高度 ).getBoundingClientRect() ...

  2. Javascript动态加载Html元素到页面Dom文档结构时执行顺序的不同

    我们有时会通过ajax动态获取一段Html代码,并且将这段代码通过javascript放到页面的Dom结构中去. 而很多时候通过ajax动态获取的Html代码中也包含javascript代码,有一点需 ...

  3. 使用tcp_probe时最初没有输出,先卸载后加载模块之后就有了。

    刚才尝试使用tcp_probe来查看tcp的窗口的变化,最初按照tcpprobe | The Linux Foundation的步骤进行设置,但是iperf之后tcp_probe并没有输出结果.按照t ...

  4. 【jquery】 在异步加载的元素上绑定事件

    最近因为工作关系又重新回归到了jquery的怀抱,发现很多jquery的一些细节处理的部分都忘记了.这里记录一下最近在做项目时频繁遇到的一个问题:给异步加载的元素添加事件绑定. 问题发生的前提是项目前 ...

  5. jquery:为动态加载的元素添加点击事件

    jquery:为动态加载的元素添加点击事件 最近在做项目的时候遇到了这样一个问题,给用ajax动态加载出来的内容添加点击事件,但是怎么都触发不了,经过查询试验总结出正确的写法 在jquery1.7之前 ...

  6. vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案

    # vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案 最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考望山的各种方案优化 1,关闭打 ...

  7. 原生js与jquery加载页面元素比较

    原生js:将获取元素的语句写到页面头部,会因为元素还没有加载而出错,js提供了window.onload 这个方法事先加载元素 <script type="text/javascrip ...

  8. Linux下文件 ~/.bashrc 和 ~/.bash_profile 和 /etc/bashrc 和 /etc/profile 的区别 | 用户登录后加载配置文件的顺序

    转自 https://blog.csdn.net/secondjanuary/article/details/9206151 文件说明: /ect/profile 此文件为系统的每个用户设置环境信息, ...

  9. 移动端,ajax 动态加载的元素,为动态添加的一系列同个类名的元素添加点击事件

    背景:一个列表页,有一系列同类名的元素,需要为每一个动态添加的列表项添加事件: 点击选择下图中不同的文档类型,再通过 ajax 动态加载不同的文档. 使用过的方法: 1.通知 jquery 的 $(s ...

随机推荐

  1. CodeForces 1144D

    原题https://vjudge.net/problem/CodeForces-1144D /*求序列就经过几次step变成同一个数, 其实能发现一个数经过step1或者step2变成相邻的数, 所以 ...

  2. 修改linux的MAC地址

    命令修改 步骤如下,但不唯一: 1.临时性的修改: ①依次输入以下命令: /sbin/ifconfig eth0 down /sbin/ifconfig eth0 hw ether 00:0C:29: ...

  3. Mybaits的中的对象映射(包含仅有基本数据类型的属性的和对象类型的属性的)

    转:https://blog.csdn.net/cjt20100/article/details/46547617. 1 constructor – 用来将结果反射给一个实例化好的类的构造器    a ...

  4. 超大jtl解析jar包使用源于testfan

    解决超大jtl解析过慢时间过长问题: usage:  java  -jar  jmeter-graph.jar    jtl_path    interval_time (单位:s) 10G文件分析测 ...

  5. php & c# DES

    php <?php class DES { var $key; var $iv; //偏移量 function DES($key = '11001100', $iv=0 ) { //key长度8 ...

  6. new和delete的深层次剖析(C++)

    c++ 是公司开发最常用的语言之一, 那new和delete 这两个函数是所有开发者即爱又恨的函数.由new 和delete引发的bug , coredump , 让多少程序员加了多少班. 1. 遇到 ...

  7. input file弹出框选择文件后缀限制

    在页面选择文件时的弹出框默认显示的是所有类型的文件,有时候文件太多不好选择,我们就要过滤掉不想展示的文件,这是需要用到input的accept属性,只有在type="file"才有 ...

  8. MyBatis知识点整理

    1.MyBatis一般使用步骤 1.1获取Configuration实例或编写配置文件 //获取Configuration实例的样例 TransactionFactory transactionFac ...

  9. pycharm pro与你同在

    下载激活码和激活依赖的jar包,地址(https://www.lanzous.com/b00t4aneb密码:67t9)按照步骤操作即可第一步:正确安装 Pycharm 软件(版本2019.1.3 p ...

  10. hdu 1281 棋盘游戏(二分图)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1281 每行每列作为节点,给可以放车的点将对应的行列连边,最多可放置的车即为建二分图后的最大匹配,跑一边 ...