浅谈IE与Firefox对CSS的不同解析
发布时间：2018-08-16 22:17:33 所属栏目：创业 来源：站长网
导读：【烈火建站学院文档】其实，以前从来没有接触过CSS相关的内容，都是在做业务的编程，从来没想过前台页面的设计也能如此复杂。这次项目的开过过程中，作为CSS菜鸟的我也接触到CSS的相关设计。所出现的低级问题和浪费很多时间的状况也层出不穷，所以通过各方
|
【烈火建站学院文档】其实，以前从来没有接触过CSS相关的内容，都是在做业务的编程，从来没想过前台页面的设计也能如此复杂。这次项目的开过过程中，作为CSS菜鸟的我也接触到CSS的相关设计。所出现的低级问题和浪费很多时间的状况也层出不穷，所以通过各方搜索和自己的实际学习中总结出几点IE和Firefox对CSS的区别，给大家借鉴。 首先，大家都知道，IE和Firefox针对于核模型的解析就不一样，自然会产生很多让人挠头的问题，以下就是我的经验总结： 1.高度的区别 IE:在没有定义高度时候，将根据内容高度的变化，包括未定义高度的图片内容； 在定义了高度时候，当内容超过高度时，将使用实际内容的高度。 FF:在没有定义高度时，如果内容中包括了图片内容，MF的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况； 在当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。 建议：在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，尽量不用使用边框样式。 2.宽度的区别 IE:内容宽度=您定义的容器宽度(Internet Explorer ’width’)-padding宽度-border宽度。 IE中定义 width:100px;padding:5px 的话，所显示的宽度就是100px。 FF:容器占的宽度=内容宽度+padding宽度+border宽度。 Firefox中定义 width:100px;padding:5px 的话，所显示的宽度就是105px。 建议：使用 !important；但是，!important一定要在前面。 如：width:95px !important;width:100px;padding:5px;。 注：高度亦是如此！ 3.浮动（float）的区别 （1）空格处理 IE:对于DIV并排时候使用float关键字时候，IE对块与块之间的空格是处理的。 FF:对于DIV并排时候使用float关键字时候，Firefox对块与块之间的空格是不处理的。 建议：经常发现使用float关键字时候在Firefox显示正常，但是在IE中会出现空格，就是这个原因； 避免在div连div时候添加空格或者回车，也即是一个div紧接这一个div写； 或者，将div放入li中进行处理，这样就不会有空格的问题。 （2）Margin加倍 IE:在使用float的情况下，IE的margin加倍。 FF:正常显示。 建议：针对IE，添加display:inline; <div id=”float”></div>相应的css为 #float{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ } 4.鼠标位置处理 IE:获取事件鼠标位置时，IE用的是event.x和event.y，并且值在不加单位的情况下可以直接使用,IE提供默认单位； div.style.left = event.x div.style.top = event.y 此时，div显示的位置为鼠标的位置。 FF:获取事件鼠标位置时，Firefox用的是MouseEvent.pageX和MouseEvent.pageY，并且在不加单位的情况下直接赋值后，无效；必须添加单位。 div.style.left = MouseEvent.pageX div.style.top = MouseEvent.pageY 此时，div显示的位置为0，0. 建议：都添加单位,无论针对IE或者Firefox都有效。 IE：div.style.left = event.x+'px' div.style.top = event.y+'px' FF：div.style.left = MouseEvent.pageX+'px' div.style.top = MouseEvent.pageY+'px' 针对IE与Firefox这些不同，解决方案可以有多种，但是当问题直接解析模型的不同的时候，我们只能分别针对浏览器的不同而单独写针对于浏览器的方法。这也是写精致CSS所必须懂得的。 以上纯属个人愚见，希望对新学CSS的同学有所帮助。 （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
