在IE浏览器下,vue项目上传服务器后样式与本地有差异怎么回事?

在一个vue项目中,ie11浏览器与360浏览器中,本地跑代码localhost:8080与在服务端ip地址上有差异,具体如下
本地样式图片描述

这个是正常的样式,本地跑的,ie11和360以及其他浏览器都没有问题,但是在服务端就变了
图片描述

如果我在服务端点击页面上任何一处地方或者是移入鼠标进入导航条区域就恢复了正常了
以下是代码

html
<li class="col-md-2 offset-md-2 "><router-link to="/" class="sel index">首页</router-link></li>

css
.router-link-exact-active{

background: #008fd7;
color:  #fff3cd;

}
nav ul li .sel{

display: inline-block;
padding: 0 .3rem;

}
我尝试过清缓存,兼容等等,但是没有解决。但是我又觉得不是兼容问题,如果是兼容问题的话在本地就会出现样式问题,但是本地是好的,问题出现在服务器上的样式,我在服务端点击审查元素时候过程中,只要一点击页面就恢复正常了,也不方便查看样式,试了好多方法也没有解决,谁知道是怎么回事或者有解决的方法呢?万分感谢

阅读 3.6k
3 个回答

我改了写法,取消了padding,改写为宽度相对于父元素设置为百分比,这样本地样式与服务端样式一样了。之前尝试过import,并没有得到有效的解决

先在浏览器上看看本地和线上的这个按钮的样式是不是一样的,另外看看是不是用了cssnano

应该是样式权重问题,打包后样式权重变了,导致的不一样。你看下对某些地方的样式重写,特别是公共样式,最好加上!important.

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题