PC端各浏览器布局兼容问题【Chrome、Firefox、IE】—

1、Firefox、IE8下属性为“readonly”的表单元素获得焦点会有光标‘I’进去。

解决办法：/(ㄒoㄒ)/~~

2、IE不支持HTML5标签

解决办法：CSS中添加如下代码

main, nav, header, footer, section, article, aside, dialog, figure, menu {display: block;
}

3、文字排列方向

1） CSS3属性writing-mode：

horizontal-tb：水平方向自上而下
vertical-rl：垂直方向自右向左
vertical-lr：垂直方向自左向右

2） IE私有-ms-writing-mode：

lr-tb：左-右，上-下。所有的字形都是竖直向上的。
td-rl：上-下，右-左。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。

4、IE不支持border-radius

解决办法：

1）下载ie-css3.htc

2）CSS

box {-moz-border-radius: 15px; /* Firefox */-webkit-border-radius: 15px; /* Safari 和 Chrome */border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */-moz-box-shadow: 10px 10px 20px #000; /* Firefox */-webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */
}

范围：IE7以上支持

3）问题

一、只能同时4角圆角，不能单独设置；

二、div上可以正常使用，测试text文本框，会出现异常；

三、CSS文件要和页面在同一目录下，否则无效

四、当前元素一定要有定位属性，像是position:relative或是position:absolute属性。

五、z-index值一定要比周围元素的要高，否则……只能说抱歉了~~

4）建议

不考虑兼容IE圆角，牺牲小部分用户部分体验，满足大部分用户。css3.htc这个文件是js写的，对浏览器性能影响太大，不建议使用。

引用自：IE兼容CSS3圆角border-radius的方法（同时兼容box-shadow，text-shadow )

PC端各浏览器布局兼容问题【Chrome、Firefox、IE】——长期更新相关推荐

h5微信页面在手机微信端和微信web开发者工具中都能正常显示，但是在pc端微信浏览器上打不开（显示空白）
记录一个最近在微信端页面开发时出现的问题:页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白). 原因:pc端微信浏览器不支持es6,而我的代码使用了 le ...
h5微信页面在手机微信端和微信web开发者工具中都能正常显示，但是在pc端微信浏览器上打不开（显示空白）...
h5微信页面在手机微信和微信开发者工具中都能正常显示,但是在pc端微信浏览器上打不开或者数据加载不出来. 原因:pc端微信浏览器不支持ES6语法,我的代码中使用了一些ES6的特性解决:将ES6转换为 ...
pc端不同浏览器兼容性问题及解决方案
代码兼容:IE7及以上,360浏览器,搜狗浏览器,谷歌,火狐,欧朋等等. 一．需要注意的地方: 1.写好标准头: 2.首先引入初始化css,保证消除不同浏览器的细微差别. 具体内容: *{margin ...
360浏览器打不开网页_苹果移动端、PC端safari浏览器打不开网页的解决方案！
你还在为苹果自带的safari浏览器打不开网页而苦恼吗,接下来的答案会帮助你解决苦恼. 苹果自带safari浏览器的设备分为两种:移动端.PC端.因此不同设备出现safari浏览器打不开网页的情况需要 ...
uniapp制作pc端响应式布局——带开源前端【伸手党福利】【持续更新】
实现目标:uniapp一套式制作pc端.pad端.手机端.符合国家等保二级标准. 目录技术分析 pc端(pad端)与移动端的开发区别 1. 用户操作习惯. 2. 界面区别. 3. 表格区别 4. 技 ...
cocos creator开发pc端的浏览器适配问题
因为pc浏览器端不比手机端,手机分辨率除了ipad等特别的,一般只需要把背景图拉宽或者拉高一些,就能保证不留黑边,pc端浏览器可以随便拉,但是一般为了效果,浏览器界面再拉也不允许留黑边的,可以试试其他 ...
如何实现飞书自建应用PC端指定浏览器打开
本人环境(php7.laravel5),为响应公司要求,内部自研信息系统集成到飞书工作台后,点击工作台应用可支持飞书指定设置浏览器单点登录.第一步:设置飞书客户端默认浏览器:第二步:配置飞书自建应用, ...
PC端微信浏览器js点击事件失效
**电脑端微信浏览器js点击事件失效**前段时间发现开发的一个微信公众号上一个按钮的点击事件在手机上是正常的,电脑端手机微信里却不起作用.在网上找了好久都没有找到解决办法.后来查看其它的页面的同样的点 ...
自定义PC端华为浏览器主页壁纸
华为浏览器可通过在地址栏键入hwbrowser://settings/homepage或者点击右上角三点>设置>主页设置更改主页壁纸.但是这样仅能改为官方预设的几种壁纸而非自己的图片,经过 ...

PC端各浏览器布局兼容问题【Chrome、Firefox、IE】——长期更新