html5 定义width不兼容,CSS-宽度自适应和浏览器兼容笔记

自适应

宽度自适应：网页元素根据窗口或子元素自动调整宽度

适用百分比进行设置，例如：100% 铺满；50% 占据一般宽度

块元素如果不设置宽度，默认为100%

自适应中可以设置最大或者最小宽度和高度

例如：min-height：300px；最小高度为300px；

但是在IE6浏览器中不识别 min-height/max-height/min-width/max-width 属性，height 属性在IE6中类似min-height ；

IE6 中解决最小高度方法：

hack1:min-height:value;_height:value;

hack2:min-height:value; height:auto!import; height:value;

高度自适应

设置方法：html,body {height:100%;}

需要自适应的元素：height: 100%;

根据父元素自适应

父元素：height: value;

需要自适应的子元素：height:100%;

height:auto;  指根据块内元素自动调节；

height：100%；指相对父块高度而定义。按照离他最近且有定义高度的父层的高度进行定义；

浏览器兼容

五大浏览器四大内核

IE浏览器内核：Trident内核，也是俗称的IE内核；

Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；

Firefox浏览器内核：Gecko内核，俗称Firefox内核；

Safari浏览器内核：Webkit内核；

Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

为什么会出现浏览器兼容性问题

因为不同浏览器使用内核及所支持的HTML(标准通用标记语言下的一个应用)等网页语言标准不同；以及用户客户端的环境不同(如分辨率不同)造成的显示效果不能达到理想效果。最常见的问题就是网页元素位置混乱，错位。

CSS Bug

css样式在各浏览器中解析不一致的情况，或者说css样式在浏览器中不能正确显示的问题

CSS Hack

css 中， hack是指一种兼容性css在不同浏览器中正确显示的技巧方法，因为他们都属于个人对css代码的非官网修改，或非官网的补丁。

Filter

过滤的意思，他是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法，本质上说Filter是一种用来过滤不同浏览器的Hack类型

对浏览器css兼容性的学习理解及问题解决汇总

转载：https://www.cnblogs.com/ahao68/p/5431250.html

一、从浏览器内核的角度 来看，浏览器兼容性问题可分为以下三类：

1. 渲染相关：和样式相关的问题，即体现在布局效果上的问题。

2. 脚本相关：和脚本相关的问题，包括JavaScript和DOM、BOM方面的问题。对于某些浏览器的功能方面的特性，也属于这一类。

3. 其他类别：除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。

二、浏览器兼容性相关问题及其解决思路

1、目前，各主流浏览器的新版本，对于  W3C  的标准支持很好，因此，首先保证代码符合 W3C 的标准，这是解决浏览器兼容问题的前提。

其次，对于某些支持受限的属性，针对不同的浏览器添加相应的前缀，比如-webkit-、-o-、-moz-。

2、不同浏览器默认的内外边距不同的问题

解决： *{margin:0;padding:0;}

3、不同浏览器水平居中的问题：ie6-7文本居中，嵌套的块元素也会居中 ，ff /opera /safari /ie8文本会居中，嵌套块不会居中

解决： 块元素设置  margin-left:auto;margin-right:auto 或margin:0 auto; 或外层嵌套div设置

浮动块元素的居中：

4、不同浏览器垂直居中的问题 ： 在浏览器中 想要垂直居中，设置vertical-align:middle; 不起作用。例如：ie6下文本与文本输入框对不齐，需设置

vertical-align:middle，但是文本框的内容不会垂直居中

解决： 给容器设置一个与其高度相同的行高 line-height:与容器的height一样

5、不同浏览器关于高度问题 ： 如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。 如果设定了高度，内容过      多时，ie6下会自动增加高度、其他浏览器会超出边框

解决： 1.设置overflow:hidden; 2.高度自增height:auto!important;height:100px;

6、IE6 默认的div高度问题： ie6默认div高度为一个字体显示的高度，在ie6下div的高度大于等于一个字的高度，因此在ie6下定义高度为1px的容器，显示的是一个字                                          体的高度

解决：为这个容器设置下列属性之一 1、设置overflow:hidden; 2、设置line-height:1px; 3、设置zoom:0.08

7、IE6 最小高度(宽度)的问题： ie6不支持min-height、min-width属性，默认height是最小高度，width是最小宽度。

解决： 使用ie6不支持但其余浏览器支持的属性!important。 设置属性min-height:200px; height:auto !important; height:200px;

8、td高度的问题 ： table中td的宽度都不包含border的宽度，但是oprea和ff中td的高度包含了border的高度

解决： 设置line-height和height一样。在ie中如果td中的没有内容，那么border将不会显示

9、div嵌套p时，出现空白行问题：div中显示

文本

，ff、oprea、Chrome：top和bottom都会出现空白行，但是在ie下不会出现空白行。

解决：设置p的margin:0px，再设置div的padding-top和padding-bottom

10、IE6-7图片下面有空隙的问题：块元素中含有图片时，ie6-7中会出现图片下有空隙

解决：1、在源代码中让

和