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不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

16

2026.03.11

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

23

2026.03.10

Kotlin Android模块化架构与组件化开发实践
Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开,重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析,帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系,提升团队协作效率与项目迭代速度。

75

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

95

2026.03.06

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

218

2026.03.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

420

2026.03.04

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

168

2026.03.04

Swift iOS架构设计与MVVM模式实战
Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

222

2026.03.03

C++高性能网络编程与Reactor模型实践
C++高性能网络编程与Reactor模型实践

本专题围绕 C++ 在高性能网络服务开发中的应用展开,深入讲解 Socket 编程、多路复用机制、Reactor 模型设计原理以及线程池协作策略。内容涵盖 epoll 实现机制、内存管理优化、连接管理策略与高并发场景下的性能调优方法。通过构建高并发网络服务器实战案例,帮助开发者掌握 C++ 在底层系统与网络通信领域的核心技术。

33

2026.03.03

热门下载

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

精品课程

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

共15课时 | 0.9万人学习

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

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