咨询服务

+QQ-1234500

移动seo

重庆SEO咨询服务+QQ-1234500

重庆seo优化html和css中常见的阅读器兼容性措置

浏览次数:    时间:2018-09-05

常见的阅读器兼容性措置


 

1、居中问题
 

div里的内容,IE默许为居中,而FF默许为左对于齐,可以测验考试增加代码:

margin: 0 auto;  

二、高度问题

两上下分列或者嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在FF中会泛起两个div重叠的现象;但在IE中,下面的div会自动给上面的div让出空间所以为防止泛起层的重叠,高度必然要节制恰当,或爽性不写高度,让他自动调度,斗劲好的法子是 height:100%;但当这个div内里一级的元素都float了的时候,则必要在div块的最后,闭和前加一个沉底的空div,对于应CSS是:

.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}  

3、clear:both;
 

不想受到float浮动的,就在div中写入clear:both;
 

4、IE浮动 margin发生的双倍间隔
 

#box { float:left; width:100px; margin:0 0 0 100px; //这种环境之下IE会发生200px的间隔 display:inline; //使浮动疏忽 }  

5、padding问题
 

FF设置 padding 后,div会增加 height 和 width,但IE不会 (* 尺度的 XHTML1.0 界说 dtd 仿佛一致了)高度节制恰当,或者测验考试使用 height:100%;宽度削减使用 padding但按照实际履历,一般FF和IE的 padding 不会有太大区别,div 的实际宽 = width + padding ,所以div写全 width 和 padding,width 用实际想要的宽减去 padding 界说。
 

六、div嵌套时 y轴上 padding和 marign的问题
 

FF里 y 轴上 子div 到 父div 的间隔为 父padding + 子marign

IE里 y 轴上 子div 到 父div 的间隔为 父padding 和 子marign 里大的一个

FF里 y 轴上 父padding=0 且 border=0 时,子div 到 父div 的间隔为0,子marign 作用到 父div 外面
 

7、padding,marign,height,width的傻瓜式解决技能
 

注意是技能,不是法子:

写好尺度头

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”>

<html xmlns=””>

高尽可能用padding,慎用margin,height尽可能补上100%,父级height有定值子级height不消100%,子级全为浮动时底部补个空clear:both的div宽尽可能用margin,慎用padding,width算准实际要的减去padding
 

八、列表类
 

1. ul标签在FF中默许是有 padding值的,而在IE中只有margin有值

先界说 ul {margin:0;padding:0;}

2. ul和ol列表缩进问题排除了ul、ol等列表的缩进时,样式应写成: {list-style:none;margin:0px;padding:0px;}
 

九、显示类(display:block,inline)
 

1. display:block,inline两个元素

display:block; //可以为内嵌元素摹拟为块元素

display:inline; //实现同一行分列的的效果

display:table; //for FF,摹拟table的效果

display:block 块元素,元素的特点是:

老是在新行上起头;高度,行高以及顶和底边距均可节制;宽度缺省是它的容器的100%,除了非设定一个宽度

<div>,<p>,<h1>,<form>,<ul> 和 <li> 是块元素的例子

display:inline 就是将元素显示为行内元素,元素的特点是:和其他元素都在一行上;高,行高及顶和底边距不成扭转;宽度就是它的文字或者图片的宽度,不成扭转。<span>,<a>,<label>,<input>,<img>,<strong> 和 <em> 是 inline 元素的例子

2.鼠标手指状显示

全部用尺度的写法 cursor: pointer;
 

10、布景、图片类
 

1. background显示问题

全部注意补齐 width,height 属性

2.布景透明问题

IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

IE: filter: alpha(opacity=10);

FF: opacity:0.6;

FF: -moz-opacity:0.10;

最好两个都写,并将opacity属性放在下面
 

11、min-height最小高度的实现(兼容IE六、IE7、FF)
 

作用是:当容器的内容较少时,能贯穿连接一个最小的高度,以免粉碎告终构或者UI设计效果。而当容器内的内容增加的时候,容器可以或许自动的伸展以适应内容的变革。

#mrjin { background:#ccc; min-height:100px; height:auto !important; height:100px; overflow:visible; }  


文章作者:老K SEO
文章标题:重庆seo优化html和css中常见的阅读器兼容性措置
本文地址:http://www.kkkseo.com/yidong/6520.html + 复制链接


地址:荆州市北门街西蒙道街路口附近  传真:+86-0000-96877
Copyright © 2012-2016 重庆SEO 版权所有  技术支持:老K SEO  ICP备案编号:黑ICP备23067621号-8