坑爹IE浏览器兼容性问题-实践性总结
前言
最近在解决公司官网兼容性问题(兼容要求:ie7+),于是借机总结一下ie浏览器的css兼容性问题,maybe后续会再总结一篇js的兼容性问题。
问题汇总及解决方法
列表li的楼梯Bug(IE6、IE7)
问题描述:li在IE7下呈楼梯状的效果,通常发生在li中放置了一些元素内容(比如说a)而且对其进行浮动,但li本身不浮动,此时在IE下就会有楼梯上了,具体先看下面的代码:
如图:
解决方法
1.让li也浮动
ul li{float:left;
}
2.改变li的显示方式
ul li{display:inline;
}
li / a 标签竖排出现莫名间距
如图:
解决方法
1.给a标签/li标签设置浮动
li / a{float:left;clear:both;
}
三个行内元素并排但有一个元素浮动,浮动的元素出现在下方
**html**
<p class="gift_nav"><span class="libao_zhongxin">新闻资讯/</span><span class="gift_center">NEWS</span><span class="dangqian_weizhi">当前位置:<a href="/dzz/home">官网首页></a><span class="zhongxin">新闻资讯</span></span>
</p>**css**
.gift_nav{width:100%;float:left;margin:0 auto;margin-top:40px;}
.libao_zhongxin{font-size:32px;font-family:'方正北魏楷书简体';color:#112763;
}
.gift_center{font-size:16px;font-family:'方正北魏楷书简体';color:#112763;
}
.dangqian_weizhi{float:right;margin-top:15px;font-size:14px;
}
如图:
解决方法:
不要使用float定位,先对要浮动元素的父元素进行position:relative;
定位然后对要右定位的元素进行position:absolute;right:0;top:15px;
即可
li显示为inline但是没有浮动,ie7以下li并不能并排而是独占一行
**HTML**
<div class="pagination_outer"><ul class="pagination"><li><a class="btn btn-default <?php if($page-1<1){ echo 'disabled'; } ?>" role="button" href="<?php echo "$listurl?page=".($page-1)."&".$params; ?>" aria-label="Previous"><span aria-hidden="true">«</span></a></li><li><a class="btn btn-default" href="<?php echo "$listurl?page=".$page."&".$params; ?>"><?php echo $page; ?></a></li><li><a class="btn btn-default <?php if($page+1>$totalPage){ echo 'disabled'; } ?>" <?php if($page+1>$totalPage){echo "style='display:none;'";}?> href="<?php echo "$listurl?page=".($page+1)."&".$params; ?>"><?php echo $page+1; ?></a></li><li><a class="btn btn-default <?php if($page+2>$totalPage){ echo 'disabled'; } ?>" <?php if($page+2>$totalPage){echo "style='display:none;'";}?> href="<?php echo "$listurl?page=".($page+2)."&".$params; ?>"><?php echo $page+2; ?></a></li><li><a class="btn btn-default <?php if($page+1>$totalPage){ echo 'disabled'; } ?>" href="<?php echo "$listurl?page=".($page+1)."&".$params; ?>" aria-label="Next"><span aria-hidden="true">»</span></a></li></ul>
</div>**CSS**
.pagination_outer{width:100%;height:74px;float:left;text-align:center;
}
.pagination_outer .pagination a{float:none;border-radius:0 !important;
}
解决方法
1.使li浮动
2.使ul浮动
上一个相邻块设置了高度,但是它实际内容超出了高度,ie浏览器中下一个块会跟在它所设置的高度屁股后面而不是被实际内容挤下到下面
**html**
<div class="gift-container"><div classs="content"></div>
</div>
<div class="footer"></div>
**css**
.gift_container {width: 1120px;height: 800px;margin: 0 auto;margin-top: 468px;
}
//实际上content的内容超过了800px
.footer {width: 100%;color: #fffcfd;font-size: 15px;overflow: hidden;margin-top: 15px;
}
如图:
解决方法
很简单,把设置的高度去掉就好啦。。。/笑哭
给div设置了overflow-y:auto,ie7浏览器下overflow-x默认为overflow-x:visible;
div{padding:0 40px;background:#fff;height:1072px;overflow-y:auto;
}
如图:
IE浏览器计算属性:
解决方法:
overflow-x:hidden
包含浮动元素的div所需的宽度在ie浏览器下比在标准浏览器下要宽
如图:
参考资料 - 鸣谢
IE常见Bug——part1
坑爹IE浏览器兼容性问题-实践性总结相关推荐
- 介绍几款浏览器兼容性测试工具
昨天和朋友聊到了有关浏览器兼容性的问题,在开发中有时的确很让人苦恼,我向他推荐了几款测试浏览器兼容的工具,分享给大伙,有什么更好的工具或是解决方法还希望大家拿出来晒一晒. IETester 这是我最先 ...
- 如何在使用新技术前评估其浏览器兼容性
这里向大家推荐两个网站:caniuse.com以及html5test.com,大家在使用新技术前,可以在这两个网站上看看浏览器的支持情况,看看自己能不能接受,同时也考虑一下能不能优雅降级. caniu ...
- 47种常见的浏览器兼容性问题大汇总
浏览器兼容性问题大汇总 Ø JavaScript 3 1. HTML对象获取问题 3 2. const问题 3 3. event.x与event.y问题 3 4. window.location.hr ...
- html 布局兼容性,HTML+CSS入门 浏览器兼容性问题及解决方案
本篇教程介绍了HTML+CSS入门 浏览器兼容性问题及解决方案,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题现象: ...
- 再谈浏览器兼容性测试
今天跟大家聊一个老生常谈的话题:浏览器兼容性测试. 测试国内网站的同学是不是已经非常头疼了,因为面对的浏览器除了国际大牌如IE, Chrome, Firefox, Opera, Safari, 还有国 ...
- CSS设置透明边框解决浏览器兼容性问题
设置透明边框的代码其实很简单,就只有一行,但是有时候很实用. border: 1px solid transparent; 有时间,你既需要边框不为0, 又不希望看到边框, 这个时候,它就起到作 ...
- CSS实现跨浏览器兼容性的盒阴影效果
2019独角兽企业重金招聘Python工程师标准>>> CSS实现跨浏览器兼容性的盒阴影效果 一.无关紧要碎碎念 在web页面的ui表现中,投影效果可以说是非常常见的一种表现效果了. ...
- 2015.7.13 第五课 课程重点(z-index、overflow、浏览器兼容性)
1.z-index=数字 z轴的值,当几个div重叠时,z-index数字越大的,越在上面 2.overflow:hidden(超过部分隐藏)/auto(超过时出现滚动框)/scroll(一直有滚动条 ...
- javascript中new Date浏览器兼容性处理
看下面的代码 <script type="text/javascript">var dt1 = new Date('2016-3-4 11:06:12');alert( ...
最新文章
- 推荐8个年薪100万BAT级优质技术大号
- 对接钉钉审批_低代码对接钉钉创建外部联系人
- icse ccf_ICSE的完整形式是什么?
- 第一节: 结合EF的本地缓存属性来介绍【EF增删改操作】的几种形式
- linux的系统移植——交叉编译器
- 绝了!一个 rm -rf 把公司整个数据库删没了
- 在linux下一般用scp这个命令来通过ssh传输文件
- 当个年轻的又不太有经验的老板有多难?
- VoLTE技术中的会话持续性-SRVCC
- 算法nodehdu 2112 hdu today
- 电大课程考核计算机应用基础,计算机应用基础课程考核说明-保定广播电视大学.doc...
- vue-cropper 自定义旋转任意角度
- Java随机生成名字大全 手机号
- html导出excel
- input的失焦事件处理
- 【荐】JS实现类似星球仿flash效果的动态菜单
- vc使用默认的浏览器打开网页
- Mackbook 外接移动硬盘无法写入数据(三种解决办法)
- android 如何查询电话当中的联系人,并查询出联系次数
- matlab 验证两个电阻并联误差会变小
热门文章
- python题库选择填空_大学计算机python选择填空题库与答案
- mySQL微信小程序的div_微信小程序登录页:CSS实现动画云层漂浮
- 有趣的研究奥巴马Net:从文本合成真实的唇语口型
- 计算机科学研究的主要课题,计算机科学技术研究性课题开题报告.doc
- OPTEE之静态TA的创建与调用
- [转载]基于遗传算法的高校排课系统研究
- 起航 | 编程王国之我的大厂梦
- 阿尔法编程python_基于python的彩虹六号alpha包获得模拟程序
- vue.js 密码加密_密码学初探:隐藏信息的艺术
- Arrays.asList contains int无效