近日,我在用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所覆盖的样式的更多相关文章

  1. element.style覆盖了我的样式!!

    原文:element.style覆盖了我的样式!! 有时候在写css时,显示效果会出现非常诡异的效果 不知道有没有遇到这种 css: #logo{ border: solid 1px blue; } ...

  2. !important:element.style 覆盖样式问题

    问题: 浏览器F12看到是这个样子. 但是我设置的样式是这样子. #iframe_close { width:750px; } 无论怎么设置样式,都无法覆盖掉element.style的样式,widt ...

  3. 样式表中的 element.style样式如何修改

    我们在写前面 web样式的时候,会发现有些时候,我们怎么修改 style里面的值,页面上的样式都不会修改,当你用工具查看时,会发现里面会有 element.style的值,这个值还找不到是在哪里出现的 ...

  4. 如何修改element.style内联样式;

    如何修改element.style内联样式: 我们在写前面 web页面样式的时候,会发现有些时候,我们怎么修改 style里面的值,页面上的样式都不会修改,当你用工具查看时,会发现里面会有 eleme ...

  5. 如何修改element.style样式

    相信很多朋友在修改主题css时遇到过一些问题,比如说出现这个elememt.style,这个有时候无法直接修改,因为找不到.因此可以通过css中的 !important 语法优先权来实现我们想要的效果 ...

  6. element.style{}

    有时在写css样式,并调试时,会出现很不可思议的现象,比如:我们定义了一个<div class=”aaa”></div>,在css中定义样式,.aaa{width:500px; ...

  7. 更改css element.style

    样式后面加 !important就可以更改element.style的优先级了

  8. 从覆盖bootstrap样式谈css选择器优先级

    样式优先级 首先简单说几个定义样式的方式: 元素内嵌: <li><a href="" style="color:#ffffff;">SH ...

  9. CSS覆盖公共样式中的某个属性

    CSS如何覆盖公共样式中的某个属性?利用CSS样式的优先级. 如下例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...

随机推荐

  1. python调用SOA服务

    python调用SOA服务,运用suds模块 #! /usr/bin/python # coding:gbk import suds,time,sys reload(sys) sys.setdefau ...

  2. shp文件的读取

    http://blog.csdn.net/q_l_s/article/details/41486813

  3. 使用sudo提示用户不在sudoers文件中的解决方法

    切换到root用户 [linux@localhost ~]$ su root 密码: [root@localhost ~]# 2 查看/etc/sudoers文件权限,如果只读权限,修改为可写权限 [ ...

  4. Onsen UI 前端框架(二)

    上一章介绍了OnsenUI一些入门的知识以及它和AngularJS配合的初始化方法.这一章,咱们继续对这块内容进行介绍,对OnsenUI提供的组件进行更进一步的学习. 咱们从手机应用布局的最上面开始. ...

  5. 微服务--webapi实现,脱离iis,脱离tomcat

    前言 微服务,顾名思义就是微小的单一的服务程序,单一流程,单一发布,开发和部署都可独立: 这是我的理解: 但基于web的服务,不管是webservice还是webapi等类似的服务都需要基于iis或者 ...

  6. Apache Storm 1.1.0 发布概览

    写在前面的话 本人长期关注数据挖掘与机器学习相关前沿研究.欢迎和我交流,私人微信:846731084 我自己测试了一下这个版本,总的来说更加稳定,新增的特性并没有一一测试,仅凭kafk-client来 ...

  7. Linux常用命令整理

    1.常用命令:cd 进入 ls(list)查看当前目录下的文件 pwd 查看目录的路径 who an i 查看当前用户 clear 清除屏幕   2.绝对路径:从根目录开始\ 相对路径:上一层.下一层 ...

  8. 手机自动化测试:Appium源码分析之跟踪代码分析八

    手机自动化测试:Appium源码分析之跟踪代码分析八   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家 ...

  9. Android中启动页ViewPager和ViewFlipper带指示器

    版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   首先我们来分析一下,想要实现启动页的功能,大家第一个想到的就是使用ViewPager,使用ViewPager确实是一种比 ...

  10. 云计算之路-阿里云上:RDS数据库连接数过万引发故障,主备库切换后恢复正常

    非常抱歉!今天 12:03-12:52 ,由于数据库连接数异常突增超过1万,达到了阿里云RDS的最大连接数限制,影响了全站的正常访问.由此给您带来麻烦,请您谅解. 在发现数据库连接数突增的问题后,我们 ...