elementUI兼容ie浏览器问题(笔记)
initial 关键字用于设置 CSS 属性为它的默认值,可作用于任何 CSS 样式。但是IE 不支持该关键字。我们只能在子元素中继续写相同的css来兼容ie,不然样式会出问题。
案例:
在使用elementui的对话框时,经常会把标题居中显示(如下图)
打开ie控制台会看到
text-align样式报错,这是因为IE 不支持initial关键字导致的,所以修改下text-align: left 就容兼容ie浏览器。
表单布局
我得习惯表单布局使用左右双列,一边12的栅格布局,代码类似下面这样
<el-row :gutter="20"><el-col :span="12"><div class="grid-content bg-purple"></div></el-col><el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20"><el-col :span="12"><div class="grid-content bg-purple"></div></el-col><el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20"><el-col :span="12" ><div class="grid-content bg-purple"></div></el-col><el-col :span="12" ><div class="grid-content bg-purple"></div></el-col>
</el-row>
这样的布局在谷歌浏览器是没问题的,毕竟最标准的浏览器,但是到ie浏览器就会存在个别换行的问题,像这样:
原因:在ie浏览器里表单个别的高度会比正常的多出一点,如下图“
正常的高度是36px,而出问题的高度是37px所以就被挤了下去
**解决办法:**我刚开始是在问题的表单同行没问题的表单的高度设置成37,这样两边一样高就不会换行了,但是这样不保险,其他的还会出问题。后面我就直接在栅格布局里使用div标签,左右分栏,如下:
<el-row><el-col :span="12"><div><el-form-item label="邮政编码"></el-form-item><el-form-item label="参加工作时间"></el-form-item></div></el-col><el-col span="12"><div><el-form-item label="传真" prop></el-form-item><el-form-item label="职务" prop></el-form-item></div></el-col></el-row>
好像这个div可以删掉,但是我懒得动了,能用就是好代码就可以留着,哈哈哈,这样问题就解决了。
未完,待补充更新
FormData对象
官方文档: FormData()构造函数
从文档上可以看出对象共有9个方法,但是你点进去会发现只有一个append方法支持ie浏览器的,其余的都不支持ie浏览器。就像这样:
所以看法的时候会发现在谷歌浏览器上好好的,但是在测试环境ie浏览器上会有问题,控制台报错:xx对象不支持get、set等等。
解决办法:自己设置一个对象,一个属性放formData,其余属性放其他信息:
const form = {formdata,name,url...
}
弹窗遮罩处于最上层
现象如下截图
尝试性修改:
在弹窗组件里加上这两句配置:
:modal-append-to-body="false"append-to-body
官方文档对这两个属性的解释:
至于有没效果等我测试了下
elementUI兼容ie浏览器问题(笔记)相关推荐
- ie input兼容 vue_IE浏览器兼容问题(基于vue)
1.IE浏览器打开网站后显示空白,并报错:Error in created hook: "ReferenceError: "Promise"未定义" 方法:安装 ...
- 右下角弹出广告 js,漂浮效果(兼容多浏览器)
分享非常不错的一个使用 JavaScript 实现的可最小化,可关闭的右下角浮动广告窗效果,可以随滚动条的滚动而自行滚动保持在右下角的固定位置.基本上兼容了所有的浏览器(包括IE 火狐 谷歌浏览器 苹 ...
- Copy复制命令兼容各种浏览器(等同于触发Ctrl+C或者Command⌘+C)
/*复制命令兼容各种浏览器*/ function copy(copyContent, isAlert, maxLength) {if (window.clipboardData) {window.cl ...
- 分享一个帮助你自定义标签并且兼容现代浏览器的javascript类库 : X-tag
为什么80%的码农都做不了架构师?>>> 日期:2012-6-26 来源:GBin1.com 今天我们介绍一个能够帮助你自定义标签的js类库:x-tag,使用这个类库可以快速 ...
- 兼容ie8_兼容IE8的一些笔记
最近在做项目,要求兼容主流浏览器之外,还得兼容win7的IE8版本,因为很多客户还是老式win7电脑,甚至还有XP系统的,突然一口老血吐出... 好了,话不多说,上点自己平时踩坑后的一些心得. 一.框 ...
- 关于文件导出(下载)功能不兼容IE浏览器的解决方案
关于文件导出(下载)功能不兼容IE浏览器的解决方案 参考文章: (1)关于文件导出(下载)功能不兼容IE浏览器的解决方案 (2)https://www.cnblogs.com/padaleidelei ...
- 让Bootstrap 3兼容IE8浏览器
看到这篇文章有越来越多的人看,我决定给大家节省时间,废话少说.有几个点大家要注意. 1.本地调试需要Web Server(如IIS.Apache,Nginx),单纯地本地打开文件不能看到兼容效果. 2 ...
- javascript 复制功能 兼容所有浏览器的解决方案
代码如下: // 兼容所有浏览器function copyUrl(url) {if (navigator.userAgent.toLowerCase().indexOf('ie') > -1) ...
- html中插人视频教程,HTML中插入视频并兼容所有浏览器
向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些,后者兼容性让人头疼 最常用的向HTML中插入视频的方法有两种,一种是古老的标签,一 ...
- 兼容所有浏览器的CSS3圆角效果
解决CSS3圆角兼容所有浏览器的方法.本文提到了一种很不错的实现跨浏览器圆角的解决方案. 前一段时间,我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元 ...
最新文章
- P3952 NOIP2017 时间复杂度
- 超过C++、压制Java与C,Python拔得TIOBE年度编程语言!
- 【Unity】11.5 物理材质 (Physics Material)
- 使用正则表达式模拟读写INI文件
- 在 C# 中,如何发现死锁并防止死锁
- parentNode,parentElement,childNodes,children的区别
- 百度SEO站群Emlog最新付费模板带会员 做资源网不错
- C#多线程操作界面控件的解决方案
- ArrayList 源码分析(JDK1.8)
- 毕设题目:Matlab图像压缩
- 小凡的Python之路——启航
- maya检查模型重合点脚本
- Android 饼形图
- 魔兽世界各服务器显示版本,魔兽世界版本时间表等级(魔兽世界国服版本时间表)...
- jQuery 选择器 选取第一个 p 元素
- Nature综述:人类微生物培养及培养组学culturomics
- Unity性能优化之动态图形渲染
- openstack 遇到的error
- 适合婚礼唱的流行歌_流行的婚礼歌曲被重新想象成数据即纸杯蛋糕
- 才睡醒,写完了好久,就在今天发了吧
热门文章
- 处理:TF卡突然变成8M,格式化提示写保护
- Archlinux 的灵魂──PKGBUILD、AUR 和 ABS
- WINDOWS2008server安全策略设置
- 货币金融学(米什金)笔记:金融体系、货币相关
- 手机通讯录分组名称_个人通讯录如何批量导入/导出
- 通过Java 画一个太极图
- 假华为手机窝点被查!画面不忍直视
- How To Clone Scrypt Based Altcoins for Fun and Profit
- android4k分辨率,4k手机有哪些 4k分辨率是多少【图文】
- mac用什么软件测试硬盘好坏,8款最好的免费Mac工具,检测和修复常见macOS问题