PC端，浏览器兼容、IE兼容（圆角、阴影、透明）

最新推荐文章于 2021-04-06 15:01:54 发布

彩笔_小qing

最新推荐文章于 2021-04-06 15:01:54 发布

阅读量1.1k

点赞数

分类专栏：兼容问题解决 PC端文章标签： PC兼容 ie兼容浏览器

本文链接：https://blog.csdn.net/qq_31164127/article/details/73467536

版权

以下所有兼容性问题都是借鉴的 Danna_Danna 的一篇文章，因为文章时间比较长了，所以根据我自己的测试和查找，将会有一些小改变，自己写一遍，以后用起来好找，有一个整理的过程更安心。

测试demo已上传：http://download.csdn.net/detail/qq_31164127/9874669

1、隐藏滚动条

<body scroll='no'></body>  /* 只支持ie7/杂项 */

body{
    overflow:hidden; // 仅支持除了ie7文档模式外的各种浏览器
}

html {
    overflow:hidden; // 支持所有的浏览器
}

2、禁用中文输入法的问题

(1) FF和IE中有效 ime-mode:disabled;

 <input type="text" name="number" id="filter" style="ime-mode:disabled;">

(2) 其他浏览器用JS实现

function clearNoNumber(_this){
   
   var result = $(_this).val().replace(/[^0-9a-z]/ig,'');
   $(_this).val(result);
}
$('#filter').on('focus',function () {
   
   clearNoNumber(this);
});
 $('#filter').on('keyup',function () {
   
   clearNoNumber(this);
});
$('#filter').on('blur',function () {
   
   clearNoNumber(this);
})

3、禁用粘贴

<input type="text" onpaste="return false;">

4、链接点击后hover样式不变

遵循 love hate 的原则 =_= ：
a:link — a:visited — a:hover — a:active
L - V - H - A

5、超过长度后用省略号显示

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eligendi ex quam soluta velit veniam! Aliquid architecto commodi doloremque itaque, labore maiores non omnis porro rem sint, unde veritatis voluptatem!
</p>

CSS 一行超过长度时的省略表示

p{
    width:100px;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

CSS 多行超过长度时的省略号表示 ( 只有拥有 -webkit- 内核的浏览器有效)

p{
    width: 150px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webki

最低0.47元/天解锁文章

彩笔_小qing

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
PC端，浏览器兼容、IE兼容（圆角、阴影、透明）

以下所有兼容性问题都是借鉴的 Danna_Danna 的一篇文章，因为文章时间比较长了，所以根据我自己的测试和查找，将会有一些小改变，自己写一遍，以后用起来好找，有一个整理的过程更安心。测试demo已上传：http://download.csdn.net/detail/qq_31164127/98746691、隐藏滚动条<body scroll='no'></body> /* 只支持ie7/杂项
复制链接

扫一扫