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

最新推荐文章于 2019-10-31 15:14:17 发布

原创最新推荐文章于 2019-10-31 15:14:17 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#PC兼容 #ie兼容 #浏览器

兼容问题解决同时被 2 个专栏收录

5 篇文章

订阅专栏

PC端

4 篇文章

订阅专栏

本文整理了PC端浏览器，尤其是IE的兼容性问题，包括隐藏滚动条、禁用中文输入法、禁用粘贴、链接hover样式、文字省略号、自动换行、清除浮动、文本和输入框对齐、容器宽度解释、div居中、min-height、禁止选中文字、背景透明以及圆角和阴影等。提供了相关CSS和JavaScript解决策略，并分享了测试DEMO链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

测试demo已上传：http://download.youkuaiyun.com/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: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
}

其他浏览器实现方式（利用伪元素）

p{
   width: 150px;
   position: relative;
   line-height: 20px;
   max-height: 40px;
   overflow: hidden;
}
p:after{
   content: '...';
   position: absolute;
   right: 0;
   bottom: 0;
   padding-left: 40px;
   background: -webkit-linear-gradient(left, transparent, #fff 55%);
   background: -o-linear-gradient(right, transparent, #fff 55%);
   background: -moz-linear-gradient(right, transparent, #fff 55%);
   background: linear-gradient(to right, transparent, #fff 55%);
}

现在，不支持伪元素（:after 和 :before）的浏览器仍然没有效果。
还没有研究 ie6 等怎么支持伪元素( :after 和 :before)=_= 下次的，我好好研究研究。。

6、使连续长字段自动换行

还是上面的 p 元素和内容

p {
    width:150px;
    word-wrap:break-word;
}

7、清除浮动

解决问题：li设置为浮动，后面的li紧随其后，不能换行

<ul>
    <li>1.一级标题
        <div>二级标题</div>
    </li>
    <li>2.一级标题
        <div>二级标题</div>
    </li>
    <li  class="clearfix">3.一级标题
        <div>二级标题</div>
    </li>
</ul>

li{
   float: left;
   margin: 0 15px 15px 0;
   background: #ffa;
 }
.clearfix{
   clear: both;
}

这里写图片描述

8、如何对齐文本和文本输入框

用户名： <input type="text" class="alter" />
密码： <input type="password" class="alter" />

.alter {
    height:100px;
}

在除了IE8以外的浏览器，文字是位于输入框的中间 middle 位置，
这里写图片描述

但是在IE8中的效果是：

这里写图片描述

解决方法为： vertical-align:middle;

.alter{
    height: 100px;
    vertical-align: middle;
}

这里写图片描述

9、容器宽度在浏览器中解释不同

<div>我是测试数据</div>

div {
    width:200px;
    border:10px solid #ffa;
}

问题：如下例子，在IE中 div 的宽度为200px，而在chrome等浏览器中的实际宽度是 220px。
解决方案：① 手动将 ie 的宽度设置为：实际width = contentWidth + padding + border

div {
    width:200px;
    width:220px\9; /* IE6, IE7, IE8, IE9, IE10 */
    border:10px solid #ffa;
}

② 给 chrome 中的元素设置 box-sizing: border-box ; （推荐解决方法）

div { // 在所有浏览器中的实际宽度都是200px
    width:200px;
    box-sizing:border-box;
    border:10px solid #ffa;
}

10、div 居中问题

在 IE 的 Quirks 文档模式下（IE6的怪异模式），margin: 0 auto; 并不能解决问题。需要使用 text-align: center ;

<div>测试居中问题</div>

在chrome、FF、Opera下 margin: 0 auto; 有效

div{
    width: 150px;
    margin: 0 auto;
    background: #aff;
}

在 IE的怪异模式下，需要给 body 设置 text-align:center;

<body style='text-align:center;'></body>

11、min-height 问题

div{
    min-height:200px;
    height:200px;
    height:auto!important;
}

12、禁止用户选中文字

-moz-user-select: none;
-o-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;

13、IE的背景透明，文字不透明

<div class="mask">
    <p>一起摇摆</p>
</div>

第一种方法：曲线救国

.mask{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    filter:Alpha(opacity=30);
    background: #000; /* 以上两行是实现 IE 背景透明 */
    background: rgba(0,0,0,0.3); /* 除 IE 外的其他浏览器的背景透明 */
    color:#fff;
    text-align: center;
}
.mask p{
    position: relative; // IE 的文字不透明
}

第二种

.mask {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#30000000,endColorstr=#30000000); /* 文字直接就是不透明的 */
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-align: center;
}

14、IE 的 border-radius圆角和 box-shadow阴影

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

 li{
     width: 200px;
     height: 200px;
     -moz-border-radius:100px; /* 早期版本的Firefox */
     -webkit-border-radius: 100px; /* 早期版本的Safari、chrome */
     border-radius: 100px; /* IE9、Opera、Chrome、Firefox、Safari*/
     moz-box-shadow: 10px 10px 20px #000;    /* 早期版本的Firefox */
     -webkit-box-shadow: 10px 10px 20px #000; /* 早期版本的Safari、chrome */
     box-shadow: 10px 10px 20px #000; /* IE9、Opera、Chrome、Firefox、Safari*/
     behavior: url(css/ie-css3.htc);
     background: #aaffff;
}