0

0

div+css兼容性问题学习总结_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 12:31:01

|

1248人浏览过

|

来源于php中文网

原创

hack模型
firefox ie7 ie6
left: *left: _left:

注:IE都能识别*;尺度阅读器(如FF)不能识别*;
IE6能识别*,但不能辨认 !important, 芭蕾舞鞋,
IE7能辨认*,也能辨认!important;
FF不能识别*,但能识别!important;IE6 IE7 FF
IE6支持下划线"_",IE7和firefox均不支撑下划线。
!important优先级
margin-left:20px !important;
margin-left:10px;
ie7优先斟酌第一条,而ie6不支撑优先级,所以忽详第一条,便按第两条显示.

IE8网页设计CSS兼容性



其他兼容技能(再次烦琐)

1, FF下给 div 设置 padding 后会招致 width 和 height 增添, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设放为 以后 div 雷同的高度, 再通功 vertical-align: middle.( 注意内容没有要换止.)
2).程度居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 须要设放 display: block;(罕见于导航本签)
4, FF 和 IE 对 BOX 懂得的差别招致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默许有 list-style 和 padding . 最佳事前声亮, 以防止不用要的费事. (罕见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最佳还加上 overflow: hidden.以到达高度自顺应.
7, 闭于手形光本. cursor: pointer. 而hand 只实用于 IE.
其他兼容性技能
1 针对firefox ie6 ie7的css样式
如今大部门都是用!important来hack,关于ie6和firefox测试可以正常显示,
但是ie7对于!important能够准确说明,会招致页里出按请求显示!觅到一个针
对IE7不错的hack方法就是使用“*+html”,如今用IE7涉猎一下,应当出有问题了。
如今写一个CSS可以这样:

#1 { color: #333; }
* html #1 { color: #666; }
*+html #1 { color: #999; }
那么正在firefox下字体色彩显示为#333,IE6下字体色彩显示为#666,IE7下字体色彩显示为#999。

2 css布局中的 IC交易网居中问题
重要的样式定义如下:

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
阐明:
首先在女级元素订义TEXT-ALIGN: center;这个的意义就是在女级元素内的内容居中;关于IE这样设定就已经可以了。
但在mozilla中不能居中。解决措施就是在子元素定义时分设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
须要阐明的是,假如您念用这个方式使整个页里要居中,倡议不要套正在一个DIV里,您能够顺次搭出少个div,
只需在每个搭出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同说明.

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width :500px; //for ie6.0-}

4 IC交易网浮动ie发生的双倍间隔

#box{ float:left; width:100px; margin:0 0 0 100px; //那类情形之下IE会发生200px的间隔 display:inline; //使浮动忽详}
这里细道一下block,inline两个元素,Block元素的特征是:老是在新行上开端,高度,宽度,行高,边距皆能够掌握(块元素);Inline元素的特色是:和其他元素正在统一行上, 新网科技,...不可节制(内嵌元素);

#box{ display:block; //可认为内嵌元素模仿为块元荤 display:inline; //完成统一止排列的的后果 diplay:table;

5 IE取阔度和高度的答题

IE没有认得min-那个订义,但实践上它把一般的width和height该做有min的情形来使。那样答题便大了,假如只用阔度和高度,
一般的阅读器里这两个值便不会变,假如只用min-width和min-height的话,IE下面基本即是出有设置宽度和高度。
好比要设置负景图片,这个宽度是比拟主要的。要解决这个问题,可以这样:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 页里的最小宽度

min-width是个十分便利的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版不断准确。但IE不认得这个,
而它实践上把width该做最小宽度来使。为了让这一命令在IE上也能用,可以把一个

搁到 标签下,然后为div指订一个类:
然后CSS这样设计:
#container{ min-width: 600px; width:expression_r(document.body.clientWidth 第一个min-width是一般的;但第2行的width使用了Javascript,这只要IE才认得,这也会让您的HTML白档不太正规。它实践上通功Javascript的断定来完成最小阔度。

7 肃清浮动

.hackbox{ display:table; //将对于象做为块元荤级的表格显示}或许.hackbox{ clear:both;}
或许参加:after(伪对象),设放在对象后产生的内容,通常和content合作使用,IE不支持彼伪对象,非Ie 阅读器支撑,
所以并不影响到IE/WIN涉猎器。这类的最费事的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV浮动IE白原发生3象荤的bug

右边对象浮动,右边采取外补丁的右边距来定位,右边对象内的白原会离右边有3px的间距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是要害}
HTML代码


9 属性挑选器(这个不能算是兼容,是暗藏css的一个bug)

p[id]{}div[id]{}
这个关于IE6.0和IE6.0以下的版原皆暗藏,FF和OPera做用
属性挑选器和子选择器仍是有区别的,子选择器的规模自情势来道缩小了,属性选择器的范畴比拟大,如p[id]中,一切p本签中有id的皆是同样式的.

10 IE捕迷躲的答题

当div利用庞杂的时分每个栏中又有一些链交,DIV等这个时分轻易产生捕迷躲的问题。
有些内容显示不进去,当鼠标挑选这个区域是发明内容确切在页面。
解决措施:对#layout使用line-height属性 或者者给#layout使用流动高和宽。页面构造绝质简略。

11 高度不顺应

高度没有顺应是当内层对于象的高度产生变化时外层高度不能主动入止调理,特殊是该内层对象使用
margin 或者padding 时。
例:

p对象中的内容

CSS:#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center;}
解决方式:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或许为DIV加上border属性。 相关的主题文章:

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

178

2026.01.28

包子漫画在线官方入口大全
包子漫画在线官方入口大全

本合集汇总了包子漫画2026最新官方在线观看入口,涵盖备用域名、正版无广告链接及多端适配地址,助你畅享12700+高清漫画资源。阅读专题下面的文章了解更多详细内容。

35

2026.01.28

ao3中文版官网地址大全
ao3中文版官网地址大全

AO3最新中文版官网入口合集,汇总2026年主站及国内优化镜像链接,支持简体中文界面、无广告阅读与多设备同步。阅读专题下面的文章了解更多详细内容。

79

2026.01.28

php怎么写接口教程
php怎么写接口教程

本合集涵盖PHP接口开发基础、RESTful API设计、数据交互与安全处理等实用教程,助你快速掌握PHP接口编写技巧。阅读专题下面的文章了解更多详细内容。

2

2026.01.28

php中文乱码如何解决
php中文乱码如何解决

本文整理了php中文乱码如何解决及解决方法,阅读节专题下面的文章了解更多详细内容。

4

2026.01.28

Java 消息队列与异步架构实战
Java 消息队列与异步架构实战

本专题系统讲解 Java 在消息队列与异步系统架构中的核心应用,涵盖消息队列基本原理、Kafka 与 RabbitMQ 的使用场景对比、生产者与消费者模型、消息可靠性与顺序性保障、重复消费与幂等处理,以及在高并发系统中的异步解耦设计。通过实战案例,帮助学习者掌握 使用 Java 构建高吞吐、高可靠异步消息系统的完整思路。

8

2026.01.28

Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

24

2026.01.27

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

122

2026.01.26

edge浏览器怎样设置主页 edge浏览器自定义设置教程
edge浏览器怎样设置主页 edge浏览器自定义设置教程

在Edge浏览器中设置主页,请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”,点击“添加新页面”并输入网址。若要使用主页按钮,需在“外观”设置中开启“显示主页按钮”并设定网址。

72

2026.01.26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
nginx浅谈
nginx浅谈

共15课时 | 0.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号