浅析被element.style所覆盖的样式
近日,我在用swiper插件写一个手游官网时,出现了一个很奇怪的问题。问题如下
如上图所示,这里是一个可以左右拖动的ul,每一个英雄介绍都是一个li标签,上图这是正常的情况。可是,它会随机不定期不定时间不限次数的出现一种很奇怪的bug,比如
上图是pc端查看的时候,11个li标签组成的英雄介绍全部挤成一团。
这张图是移动端查看的时候,又会出现相距甚远的情况
而且,最主要的是,这种情况并不是一直都这样子的,这个bug发作时间不规律,而且一刷新就好了,这也给我定位问题带来了不小的难度
后来,我抓住一次bug重现的机会,仔细看了这一部分的代码,我发现一个令我很在意的地方
我这里为了移动端自适应(该网站主要是面向移动端的),采用的是rem作为单位,而不是用px
但是,我在样式里面发现竟然出现了px
带着疑问与纳闷,我再次检查了我的代码。
内联样式:没有;
引入的swiper.css和我自己写的样式里面都没有出现与这个相匹配的内容,就连element.style都没有
我试着把li这里的属性给勾选取消,结果网页就恢复正常了,现在基本可以确定就是因为这个问题导致bug的出现
然而,这个element.style到底是什么?为什么因为这个东西会导致Bug?
我上网查了下,发现这个element.style是内联样式或者是js改写代码之后所留下的,刚才说过,内联样式没有这方面的东西
那么,就只剩下js了,我先检查了自己写的js,没问题,再一看swiper的js,懵逼了,因为,我用的是swiper.min.js
于是,我只能用最笨的办法,修改下面的swiper的js代码里面的参数
我发现,根据这里的修改,那个element.style里面的值也不停在变,slidesPerView: 后面的参数本来是代表着这一排会出现几个li,数字越大,element.style里面的width越小,如果不写,那么就是100%父元素的宽
后面一个就更简单了,就是margin-right,参数是多少,就是多少个px的margin-righ;
原来,该问题的起因是因为swiper插件,会根据最外层的.swiper-container的宽度和slidesPerView: 后面的参数给li设置宽度,当我处在PC端时,屏幕宽度大概是1900+px,.swiper-container的宽度大概是1700+px,而且我这里的slidesPerView: 后面的参数是6,也就是说,一个li差不多是280+px左右,当我用谷歌浏览器里面的手机模拟器来看的时候,这几个li标签的宽度还是280+px,但是,我其他的使用的是rem,我的rem是随着屏幕宽度的变化而变化,这样问题就来了,li标签的宽度是不会变的,刷新了页面第一次生成多少就是多少(除非再次刷新页面),但是我的其他dom的尺寸,却随着屏幕宽度大小在改变。所以才会出现我们看到的,超宽或者挤成一团的问题。
现在问题原因弄明白了,那么怎么解决呢?element.style根本就不存在啊,而且,引用swiper插件的那段代码不能改,最主要的是,我的swiper插件用的是swiper.min.js,想改都没办法改啊?
其实解决的办法很简单,你们是否还记得一样东西: !important
没错,这个东西的作用就是提高指定CSS样式规则的应用优先权。
也就是说:这个东西可以覆盖掉element.style里面的属性
直接在要覆盖的样式后面加上!important
最后:我不知道这个问题该分类到swiper插件上呢,还是该分类到其他地方,但是我觉得吧,以后在开发过程中,一定不要用xxxx.min.js 千万不要在开发过程中用压缩过的插件,不然出了问题,到时候真的很麻烦
浅析被element.style所覆盖的样式的更多相关文章
- element.style覆盖了我的样式!!
原文:element.style覆盖了我的样式!! 有时候在写css时,显示效果会出现非常诡异的效果 不知道有没有遇到这种 css: #logo{ border: solid 1px blue; } ...
- !important:element.style 覆盖样式问题
问题: 浏览器F12看到是这个样子. 但是我设置的样式是这样子. #iframe_close { width:750px; } 无论怎么设置样式,都无法覆盖掉element.style的样式,widt ...
- 样式表中的 element.style样式如何修改
我们在写前面 web样式的时候,会发现有些时候,我们怎么修改 style里面的值,页面上的样式都不会修改,当你用工具查看时,会发现里面会有 element.style的值,这个值还找不到是在哪里出现的 ...
- 如何修改element.style内联样式;
如何修改element.style内联样式: 我们在写前面 web页面样式的时候,会发现有些时候,我们怎么修改 style里面的值,页面上的样式都不会修改,当你用工具查看时,会发现里面会有 eleme ...
- 如何修改element.style样式
相信很多朋友在修改主题css时遇到过一些问题,比如说出现这个elememt.style,这个有时候无法直接修改,因为找不到.因此可以通过css中的 !important 语法优先权来实现我们想要的效果 ...
- element.style{}
有时在写css样式,并调试时,会出现很不可思议的现象,比如:我们定义了一个<div class=”aaa”></div>,在css中定义样式,.aaa{width:500px; ...
- 更改css element.style
样式后面加 !important就可以更改element.style的优先级了
- 从覆盖bootstrap样式谈css选择器优先级
样式优先级 首先简单说几个定义样式的方式: 元素内嵌: <li><a href="" style="color:#ffffff;">SH ...
- CSS覆盖公共样式中的某个属性
CSS如何覆盖公共样式中的某个属性?利用CSS样式的优先级. 如下例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
随机推荐
- python调用SOA服务
python调用SOA服务,运用suds模块 #! /usr/bin/python # coding:gbk import suds,time,sys reload(sys) sys.setdefau ...
- shp文件的读取
http://blog.csdn.net/q_l_s/article/details/41486813
- 使用sudo提示用户不在sudoers文件中的解决方法
切换到root用户 [linux@localhost ~]$ su root 密码: [root@localhost ~]# 2 查看/etc/sudoers文件权限,如果只读权限,修改为可写权限 [ ...
- Onsen UI 前端框架(二)
上一章介绍了OnsenUI一些入门的知识以及它和AngularJS配合的初始化方法.这一章,咱们继续对这块内容进行介绍,对OnsenUI提供的组件进行更进一步的学习. 咱们从手机应用布局的最上面开始. ...
- 微服务--webapi实现,脱离iis,脱离tomcat
前言 微服务,顾名思义就是微小的单一的服务程序,单一流程,单一发布,开发和部署都可独立: 这是我的理解: 但基于web的服务,不管是webservice还是webapi等类似的服务都需要基于iis或者 ...
- Apache Storm 1.1.0 发布概览
写在前面的话 本人长期关注数据挖掘与机器学习相关前沿研究.欢迎和我交流,私人微信:846731084 我自己测试了一下这个版本,总的来说更加稳定,新增的特性并没有一一测试,仅凭kafk-client来 ...
- Linux常用命令整理
1.常用命令:cd 进入 ls(list)查看当前目录下的文件 pwd 查看目录的路径 who an i 查看当前用户 clear 清除屏幕 2.绝对路径:从根目录开始\ 相对路径:上一层.下一层 ...
- 手机自动化测试:Appium源码分析之跟踪代码分析八
手机自动化测试:Appium源码分析之跟踪代码分析八 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家 ...
- Android中启动页ViewPager和ViewFlipper带指示器
版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 首先我们来分析一下,想要实现启动页的功能,大家第一个想到的就是使用ViewPager,使用ViewPager确实是一种比 ...
- 云计算之路-阿里云上:RDS数据库连接数过万引发故障,主备库切换后恢复正常
非常抱歉!今天 12:03-12:52 ,由于数据库连接数异常突增超过1万,达到了阿里云RDS的最大连接数限制,影响了全站的正常访问.由此给您带来麻烦,请您谅解. 在发现数据库连接数突增的问题后,我们 ...