首页 > 操作系统 >

前端浏览器的兼容性问题和解决方案.

电脑杂谈　发布时间：2020-07-09 15:09:50　来源：网络整理

web前端浏览器兼容_前端浏览器兼容性问题_前端安全性问题

前端浏览器兼容性问题和解决方案王国栋itwanggj@163.com什么是浏览器兼容性问题？ •浏览器兼容性问题也称为网页兼容性或网站兼容性问题，这是指网页在各种浏览器上的显示效果不一致，从而导致浏览器和网页之间出现兼容性问题. ？用外行的术语来说，当您使用不同的浏览器（Firefox，Chrome，IE6，IE7等）访问同一网站或页面时，它通常在一个浏览器中显示，但在另一个浏览器中显示混乱. ？不同的浏览器对CSS的解释不同. 如何为最常用的浏览器“最头痛”的浏览器在IE5、6、7和8中调试页面？ IETesterIE浏览器开发人员工具浏览器兼容性问题？ 1. div的垂直居中？垂直对齐: 中间；？行高: 200px ;？将行距增加到与整个DIV相同的高度，然后插入文本使其垂直居中. ？缺点是控制内容不包装. 2.利润翻倍的问题？设置为float的div将使ie下设置的边距翻倍. 这是IE6中存在的错误. 解决方案是添加display: inline;

#Iamfloat {float: left; margin: 5px; / *在IE下10px * / display: inline; / *在IE下被理解为5px * /} display: inline;默认.

此元素将显示为嵌入式元素，该元素前后没有换行符. 3. IE#box {float: left;浮动引起的双倍距离问题. 宽度: 100px; margin: 0 0 0 100px; //在这种情况下，IE将产生200px的距离display: inline; //忽略浮点数}？这是block和inline的两个元素: block元素的特征: 总是从新行开始，可以控制高度，宽度，线高，边距（block元素）； Inline元素的特征: 和同一行上的其他元素不可控制（inline元素）； #box {display: block; //可以将内联元素模拟为块元素display: inline; //达到相同的行排列效果diplay: table; ... 4. IE的宽度和高度问题？ IE无法识别min-的定义，但实际上它使用正常的宽度和高度，就好像存在min. 这是个大问题. 如果仅使用width和height，则这两个值在普通浏览器中不会更改. 如果仅使用最小宽度和最小高度，则IE根本不会设置宽度和高度. 例如，要设置背景图像，此宽度更为重要. 要解决此问题，您可以执行以下操作: #box {width: 80px;高度: 35像素；} html> body #box {width: auto;高度: 自动；最小宽度: 80px；最低高度: 35像素； } 5. 页面最小宽度问题？？ Min -width是一个非常方便的CSS命令，它可以指定最小元素不能小于一定宽度，从而确保布局始终正确.

但是IE无法识别这一点，它实际上使用width作为最小宽度. 要使此命令在IE上运行，您可以在标记下放置一个

，然后为div指定一个类，然后像这样设计CSS: #container {min-width: 600px; width: expression（document.body.clientWidth <600？“ 600px”: “ auto”）; }？第一个最小宽度是正常的；但第2行的宽度使用Javascript（仅由IE识别），实际上它通过Javascript判断来达到最小宽度. 缺点: 这也会使您的HTML文档不那么正式. 6. DIV浮动IE文本有3px问题吗？左侧的对象浮动，外部补丁的左侧边缘用于在右侧定位. 右侧对象中的文本与左侧的间距为3px. #box {float: left; width: 800px;} #left {float: left; width: 50％;} #right {width: 50％;} * html #left {margin-right: -3px; //这句话是关键}

显示差异IE67. 高度不兼容的问题？高度不兼容是指内部对象的高度发生变化时，无法自动调整外层的高度，特别是当内部对象使用边距或填充时.

示例: 解决方案: 在P对象的前面和后面添加一个div对象，并向div对象添加一个border属性. 8. IE图片下有空白吗？解决此错误的方法有很多，您可以更改html的布局，或将img设置为display: block或将vertical-align属性设置为vertical-align: top |底部|中| text -bottom可以解决. IE9. 对齐文本和文本输入框问题以及vertical-align: middle;