词条信息

admin
admin
超级管理员
词条创建者 发短消息   

相关词条

热门词条

更多>>
做自媒体,每个月究竟能赚多少钱?
做自媒体可以赚钱,这是众所周知的,从几百到几千,最后到几万[详细]
华住个人信息泄露案告破
9月19日消息 根据华住集团官网的消息,9月17日,华住集[详细]
教你辨别原装和杂牌苹果充电器
  为什么同样是充电器原厂和山寨的价格会差这么多,难道就真[详细]
苹果iOS12支持的设备
iOS12已于今日凌晨正式发布了。据悉,本次iOS12的升级是[详细]
支付宝接入银联,支付行业将有这些大变化
支付宝接入银联传闻终于落地。9月14日,每日经济新闻(微信号:[详细]
解决网 >>所属分类 >> 网页设计    CSS   

CSS的浏览器兼容性问题解决

标签: CSS 浏览器 兼容性

顶[0] 发表评论(0) 编辑词条

现在继续对浏览器中存在的CSS的兼容性问题进行简单说明。 www.solves.com.cn 电脑百科

1)列表不能换行的问题

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

问题: www.solves.com.cn 电脑百科

li设置为浮动,后面的li紧随其后,不能换行

www.solves.com.cn 电脑百科

解决: www.solves.com.cn 电脑百科

在下一个li上清除浮动:clear:both

www.solves.com.cn 电脑百科

实例: www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

一级标题二级标题二级标题一级标题二级标题二级标题 www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

2)如何对齐文本和文本输入框

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

问题:

www.solves.com.cn 电脑百科

当input元素在设置了高时,在IE7、IE8、IE9下会出现文本和文本输入框不能对齐的现象,其他正常,包括opera

www.solves.com.cn 电脑百科

解决: www.solves.com.cn 电脑百科

vertical-align:middle; www.solves.com.cn 电脑百科

实例:

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

  .in{ www.solves.com.cn 电脑百科

  width:200px;

www.solves.com.cn 电脑百科

}

www.solves.com.cn 电脑百科

.alter www.solves.com.cn 电脑百科

{ www.solves.com.cn 电脑百科

  width:200px;

www.solves.com.cn 电脑百科

  vertical-align:middle; www.solves.com.cn 电脑百科

}修正前:用户名密码修正后:用户名密码 www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

3)容器宽度在浏览器中解释不同 www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

问题:

www.solves.com.cn 电脑百科

不同浏览器下宽度不同,比如说设置width:200px,在iE7、IE8、IE9下显示的是200px,在FF、Chrome、Opera中显示的是220px www.solves.com.cn 电脑百科

解决: www.solves.com.cn 电脑百科

用width:200px; *width:220px,其中iE7、IE8、IE9会识别两个宽度,以后者为准,故宽度为220px,在FF、Chrome、Opera中,识别第一个宽度,解析后显示宽度为220px

www.solves.com.cn 电脑百科

实例: www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

修正前: www.solves.com.cn 电脑百科

 点我,看看有什么不同!修正后: www.solves.com.cn 电脑百科

 点我,看看有什么不同! www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

4) Div居中问题

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

问题: www.solves.com.cn 电脑百科

IE7、IE8、IE9在设置了margin-left和margin-right为auto后,并不能使div居中显示,其他行

www.solves.com.cn 电脑百科

解决:

www.solves.com.cn 电脑百科

设定body居中,定义text-algin: center

www.solves.com.cn 电脑百科

实例:

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

 div居中问题解决

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

5) 字体大小问题 www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

问题:

www.solves.com.cn 电脑百科

对字体大小small的定义不同,Firefox中为16px,而IE7、IE8、IE9中为16px,差别挺大

www.solves.com.cn 电脑百科

解决: www.solves.com.cn 电脑百科

明确说明字体的大小,例如16px

www.solves.com.cn 电脑百科

实例: www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

p对象中的内容,此时字体大小为small p对象中的内容,此时字体大小固定为16px www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

6) min-height问题

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

问题:

www.solves.com.cn 电脑百科

IE7、IE8、IE9对min-height不识别,其他无问题

www.solves.com.cn 电脑百科

解决: www.solves.com.cn 电脑百科

#box{width: 100px; height: 35px;} www.solves.com.cn 电脑百科

html>body#box{ width:auto; height:auto; width:100px; min-height:35px;} www.solves.com.cn 电脑百科

实例:

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

www.solves.com.cn 电脑百科

www.solves.com.cn 电脑百科

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

 

www.solves.com.cn 电脑百科

解决方法:

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

7) 层垂直居中 www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

问题:

www.solves.com.cn 电脑百科

层不能垂直居中 www.solves.com.cn 电脑百科

解决:

www.solves.com.cn 电脑百科

利用position:absolute;top:50%;left:50%;margin:-100px;width:200px;height:200px;border:1px solid red;

www.solves.com.cn 电脑百科

实例:

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

层垂直居中问题 www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

8) 嵌套div标签的居中问题 www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

问题: www.solves.com.cn 电脑百科

假定有一下情况:即div嵌套div

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

此时要设置内层div在外层div的居中位置,在外层设置了text-algin为center后,IE7、IE8、IE9显示正常,但是在IE10和chrome和opera和FF仍然显示在居左位置。 www.solves.com.cn 电脑百科

解决:

www.solves.com.cn 电脑百科

除在外层设置text-algin为center,在内层div中设置margin:0 auto样式 www.solves.com.cn 电脑百科

实例: www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

  解决前: 嵌套div标签的居中问题解决后: 嵌套div标签的居中问题

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

9) td高度的问题

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

问题: www.solves.com.cn 电脑百科

在IE9、IE10、FF、chrome中table中td的高度不包含border的宽度,但是IE7和IE8中td的高度包含了border的高度,设置line-height和height一样。 www.solves.com.cn 电脑百科

解决:

www.solves.com.cn 电脑百科

暂无解决方法

www.solves.com.cn 电脑百科

其问题示例如下:

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

设置line-height:20px设置height:20px

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

10) li指定高度后,出现排版错误

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

问题:

www.solves.com.cn 电脑百科

在IE7下如果为li指定高度可能会出现排版错位,其他浏览器无此现象

www.solves.com.cn 电脑百科

解决:

www.solves.com.cn 电脑百科

设置line-height www.solves.com.cn 电脑百科

实例: www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

解决前:hellohellohellohello解决后:hellohellohellohello www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

11) list-style-position默认值的问题

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

问题: www.solves.com.cn 电脑百科

IE7、FF、chrome、Opera默认的li的list-style-position属性为inside,而在IE8、IE9、IE10默认的是list-style-position:outside www.solves.com.cn 电脑百科

解决:

www.solves.com.cn 电脑百科

将其显示的样式明确表示 www.solves.com.cn 电脑百科

实例:

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

解决前:hellohello解决后:hellohello

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

12) 禁止选取网页内容

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

问题: www.solves.com.cn 电脑百科

在需要禁止选取网页的内容,FF用-moz-user-select:none,其他浏览器用onselectstart='return false' www.solves.com.cn 电脑百科

解决:

www.solves.com.cn 电脑百科

FF:-moz-user-select:none

www.solves.com.cn 电脑百科

其他:onselectstart='return false'

www.solves.com.cn 电脑百科

实例: www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

善良公社中有一个功能是实现用户登录后根据用户名查询订单和预购信息,在easyui框架下向datagrid中导入数据,因为1.0版本中社河做过这个功能,参照他的代码完成了我这部分,根本思想是一样的:查找数据转换为json格式,再显示到窗体中。 www.solves.com.cn 电脑百科

13)如何对其文本和文本输入框的内容 www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

问题:

www.solves.com.cn 电脑百科

当input元素在设置了高和设置了text-align:center时,在IE7、IE8、IE9下会出现文本和文本输入框内容不能对齐的现象,其他正常,包括opera

www.solves.com.cn 电脑百科

解决:

www.solves.com.cn 电脑百科

在样式中设置line-height:100px www.solves.com.cn 电脑百科

实例: www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

  .in{ www.solves.com.cn 电脑百科

  width:200px; www.solves.com.cn 电脑百科

}

www.solves.com.cn 电脑百科

.alter

www.solves.com.cn 电脑百科

{

www.solves.com.cn 电脑百科

  width:200px;

www.solves.com.cn 电脑百科

  vertical-align:middle;

www.solves.com.cn 电脑百科

}修正前:用户名密码修正后:用户名密码

www.solves.com.cn 电脑百科

       到此为止,我整理的有关于CSS的兼容性和JS的兼容性就在这里了,我感觉我所整理的这些东西也只是众多兼容性问题中的一些皮毛,更多的还有待我去发现解决总结。

www.solves.com.cn 电脑百科

 

 

本文地址:解决网 http://www.solves.com.cn/doc-view-4476.html

TAGS:SOLVES , 电脑技术 , 电脑知识 , 网站建设, 电脑技术, 网络营销 , 网站托管 , 硬件技术 , 网络技术 , 软件技术, 维修网点

附件列表


按字母顺序浏览:A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

→我们致力于为广大网民解决所遇到的各种电脑技术问题
 如果您认为本词条还有待完善,请 编辑词条

上一篇HTML写一个网页动态时钟
下一篇css去掉iPhone、iPad默认按钮样式

0
1. 本站部分内容来自互联网,如有任何版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
2. 本站内容仅供参考,如果您需要解决具体问题,建议您咨询相关领域专业人士。
3. 如果您没有找到需要的电脑技术问题词条,您可以到百科问答提问或创建词条,等待高手解答。

关于本词条的提问

查看全部/我要提问>>