HTML兼容性问题
前端开发中常见的浏览器兼容性问题解决方案
前端开发中常见的浏览器兼容性问题解决方案随着互联网的普及，前端开发在现代社会中扮演着重要的角色。
然而，由于不同浏览器的存在，前端开发人员经常面临着各种兼容性问题。
本文将介绍一些常见的浏览器兼容性问题，并提供解决方案以帮助开发人员更好地应对这些问题。
一、HTML和CSS兼容性问题1. 盒子模型不同浏览器对于盒子模型的计算方式存在一定的差异，导致元素的宽度和高度在不同浏览器中显示不一致。
解决方案是设置CSS的box-sizing属性为border-box，确保盒子的宽度和高度包括边框和内边距。
2. 布局问题某些浏览器可能对布局方式的解析存在差异，导致页面在不同浏览器中显示效果不同。
解决方案是使用流式布局，避免使用绝对定位和负边距等方式，保证页面在不同浏览器中具有一致的布局。
3. 字体渲染不同操作系统和浏览器对于字体渲染的方式也存在一定的差异，导致页面上的文本显示效果不一致。
解决方案是使用Web字体（如Google Fonts）来确保在不同浏览器中显示一致的字体。
二、JavaScript兼容性问题1. DOM操作不同浏览器对于DOM的操作也存在差异，导致在某些浏览器中无法正常执行某些操作。
解决方案是使用现代的JavaScript库（如jQuery）来处理DOM操作，确保在不同浏览器中具有一致的行为。
2. 事件处理某些浏览器可能对于事件处理的方式存在差异，导致在某些浏览器中无法正确触发事件。
解决方案是使用事件委托（event delegation）的方式来处理事件，确保在不同浏览器中都能正常触发事件。
3. ES6语法支持某些浏览器可能对于ES6新特性的支持存在差异，导致代码在某些浏览器中无法正常执行。
解决方案是使用Babel等工具将ES6代码转换为ES5代码，以确保在各种浏览器中都能正常运行。
三、跨域问题由于同源策略的限制，浏览器会阻止跨域的请求和操作，默认情况下，浏览器只允许在同一域下的请求。
解决方案是使用JSONP、CORS或代理服务器来解决跨域问题，以便实现不同域之间的数据交互。
如何解决HTML5标签不兼容
一、HTML5标签在浏览器展示存在的问题对于现阶段来说，使用HTML5标签可能遇到的最大问题就是如何在不支持新标签的浏览器中做恰当的处理。
当我们在页面中使用HTML5元素时，可能会得到三种不同的结果。
结果1：标签被当作错误处理并被忽略。
那么DOM构建的时候，就会当作这个标签不存在。
结果2：标签会被当作错误处理，并在DOM构建的时候依然会按照预期的代码进行创建，并且HTML标签会被构造成行内元素（也就是说虽然不能识别，但是代码里section 标签依然会在dom中创建一个对应section节点，但是属于行内元素）。
结果3：标签被识别为HTML5标签，然后用DOM节点对其进行替换。
DOM在构建的时候和预想的一致，并且合适的样式会应用到标签上（大部分情况下是块级元素）。
有一个具体的例子，大家思考一下下面的代码：<div class="outer"><section><h1>title</h1><p>text</p></section></div>很多浏览器（比如Firefox 3.6和Safari4）解析的时候都会将div作为最外层的元素，然后div里面是一个识别不了的元素（section），它会在DOM中创建，并被作为一个行内元素存在。
h1和p元素都是作为section元素的子节点。
因为section在DOM中真实存在，所以也可以修改其样式。
这种情况对应结果2。
IE9之前的版本会认为section标签是一个错误，并直接将其忽略，那么h1和p标签会被解析，然后成为div标签的子节点。
</section>也会被认为是一个错误并直接跳过。
在这些浏览器中实际有效的代码是这样的：<div class="outer"><h1>title</h1><p>text</p></div>那么，旧版本的IE浏览器除了生成的DOM结构和其他浏览器不一样，其对不可识别标签的容错能力还是很棒的。
html5兼容性问题
网页设计html+css兼容性问题处置方法汇总标准网页布局的标准的最大挑战不在于技术本身，而在于处置。
所谓阅读器兼容问题，确实是当咱们利用不同的阅读器（如IE 7、IE 六、Firefox等）访问同一个页面时，可能会显现不一致的情形，显现这种现象的缘故有很多种，但全然缘故确实是阅读器关于技术支持的标准不同造成的。
IE阅读器关于标准技术的支持是很不完善的，这些问题能够分为两种：一种是IE支持某种技术或功能，可是实现该功能的方式和途径与标准技术不同；另一种是IE阅读器自身的解析机制存在很多Bug，致使页面解析成效与标准不同。
本章将兼顾IE 六、IE 7和FF三种主流版本或类型阅读器进行讲解，其中IE 6阅读器用户数最多，IE 7的用户将慢慢超越和代替IE 6，而FF阅读器代表了标准阅读器的主流。
1 兼容不同类型阅读器的大体方式不同类型阅读器关于技术的支持是不完全统一的，若是再加上阅读器关于解析时存在各类Bug，CSS兼容性处置就变得异样复杂。
解决阅读器兼容问题的方式，这些方式被称之为Hack （即补丁的意思）。
所谓Hack，确实是利用各类过滤方式专门为特定类型阅读器概念样式，即称之为过滤器（Filter），从而实此刻不同类型阅读器中呈现相同的渲染成效。
过滤器是一种形象的称号，事实上它确实是各类阅读器支持或不支持某种声明或样式的特殊用法。
例如，IE 6以下版本阅读器不支持!important关键字，咱们就能够够利用那个关键字专门为IE 6及其以上版本阅读器或非IE阅读器概念样式，从而过滤掉IE 6以下版本阅读器在解析时存在的问题。
21 标准网页布局的兼容性处置经常使用过滤器目前全世界设计师发觉并总结出来的过滤器超级多，要记住这些过滤器是很繁琐的，读者能够参阅ref/css/filters/31 标准网页布局的兼容性处置经常使用过滤器41 标准网页布局的兼容性处置经常使用过滤器IE 7版本阅读器专用过滤器若是专门为IE 7版本阅读器概念样式，那么能够利用如下过滤器。
如何处理前端开发中常见的兼容性问题(七)
如何处理前端开发中常见的兼容性问题在前端开发中，兼容性问题是一个常见而令人头疼的难题。
不同的浏览器和设备对于网页的渲染方式和支持的功能存在差异，因此在开发过程中往往会出现兼容性问题。
本文将探讨一些常见的兼容性问题，并提供解决方案，帮助开发者更好地处理这些问题。
一、HTML与CSS兼容性问题1. 盒模型差异不同浏览器对于盒模型的解析方式存在差异，导致盒子的宽度和高度计算存在偏差。
解决方法是通过CSS的box-sizing属性设置为border-box，使盒子的宽度和高度包括边框和内边距。
2. 样式渲染差异不同浏览器对于一些CSS样式属性的渲染方式存在差异，如行高、字体大小、边框样式等。
解决方法是使用CSS reset或normalize来重置浏览器默认样式，保证页面在不同浏览器中的一致性。
3. CSS3属性兼容性一些较新的CSS3属性在旧版浏览器中可能不被支持，如圆角、阴影、过渡效果等。
解决方法是使用CSS前缀，通过添加-webkit、-moz、-o、-ms等前缀，让不同浏览器兼容这些属性。
二、JavaScript兼容性问题1. DOM操作差异不同浏览器对于DOM操作的支持程度存在差异，如事件绑定、节点增删改等。
解决方法是使用JavaScript库或框架，如jQuery，提供跨浏览器兼容性。
2. ES6语法兼容性一些较新的ES6语法在旧版浏览器中可能不被支持，如箭头函数、模板字符串、let和const等。
解决方法是使用Babel等转译工具，将ES6语法转换为ES5，以实现跨浏览器兼容性。
3. AJAX跨域问题由于浏览器的同源策略限制，AJAX请求通常只能请求同源服务器上的数据。
解决方法是使用JSONP、CORS、代理等方式，实现跨域请求数据。
三、响应式设计兼容性问题1. 媒体查询差异不同设备的屏幕尺寸和分辨率存在差异，因此响应式设计中使用的媒体查询可能在某些设备上失效。
解决方法是使用断点测试和媒体查询优化，确保页面在不同设备上呈现良好的适应性。
html兼容性问题介绍上CanIuse查找
html兼容性问题介绍上CanIuse查找为什么会出现兼容性问题?由于市面上的浏览器种类太多了, 所以对css的解析也是五花八门的,导致显示的效果并不统一,因此也就带来了兼容性问题.就好比如说同一个零件不同的厂家都有自己的一套模板,因此多多少少会有点偏差. 为什么程序员喜欢用Chrome市面上浏览器这么多, 我们不可能做到每一个都要去兼容, 不然一个样式得打出来一堆代码.还不得头疼死, 因此,对于一些用户量一般的浏览器我们大概大概的.并且根据世界市场权威调查机构NetMarketShare公布的2018年10月各浏览器市场占有率，可以看出Chrome的占有率达到了66.43%. 所以像我这种新手开始学前端用的浏览器也是Google Chrome.现在说说浏览器的私有属性这个刚开始也是让我很困惑了, 为什么一个样式前面就非要搞特殊加上一些-webkit-, -moz-, -ms-这些奇奇怪怪的东西,好好的写样式它不香吗这些其实就是浏览器的私有属性.是不是有点好奇为什么会出现私有属性,把前面去掉的话大家不就更方便了吗?作为程序员的我,多希望所有浏览器统一样式.这是因为制定HTML和CSS的组织W3C的审批比较慢.打个比方:有W3C组织提出一个新属性,比如说border-radius,各个浏览器都觉得: 咦听起来好像很不错,边框终于不方了,但是W3C制定标准和流程又很慢还很复杂,得等很久. 但是浏览器的竞争有这么激烈,好的当然得先拿过来用用.但是又怕W3C公布的标准有所变更,也是很头疼的一件事, 因此各个浏览器会加下自己的前缀来支持新属性. 等着W3C公布标准后再确立写法.那么来了解下几个常用的前缀:•-moz- 代表firefox浏览器私有属性•-ms- 代表IE浏览器私有属性•-webkit- 代表chrome,safari私有属性•-o- 代表opera私有属性对于私有属性的一些编写要注意的是把标准属性写在最后面,带有私有属性的样式写在前面.看到这,大家会在想那我怎么知道哪些属性要写兼容模式,也不能了解到第一首资料.Can I use就是这个网站,上面会列出什么属性需要添加前缀但是这个也是很头疼,加前缀的属性少的话还可以,如果一大波属性都在前缀,光敲代码也敲得头皮发麻. 因此现在普遍的开始使用了Autoprefixer这个浏览器前缀插件,它可以解析CSS文件并且添加浏览器前缀到CSS内容里,使用Can I use的数据来决定哪些前缀是需要的.鼠标移上去该加什么前缀都有了, 很方便的一个网站。
htmldivcss常见的浏览器兼容问题及解决方法(很全)
div+css教程之常见的浏览器兼容问题及解决方法1.图片下方出现几像素的空白间隙问题说明：这个问题在ie6和ff（火狐）下经常见到,例如 <div><imgsrc=""/></div>这个图片下面会有一条空白间隙，解决方法：给图上一个垂直方向的属性如:vertical-align: top(任意一个就行middle);这个问题从而延伸到，object(视频)和textarea在火狐下也会出现类似的问题，解决方法一样。
细心的朋友会发现在第二节ahuing的重置代码里就有这样一个全局定义object,textarea,img{vertical-align: top;}2.IE6双倍margin的BUG(双边距)问题说明：这是ie6一个著名的bug，当一个元素向一边浮动时，其它同一个方向如果有margin的话，ie6就会产生双倍的margin。
例如：<div style="float: left;margin-left: 10px;"></div>在ie6下显示会有margin-left:20px的距离解决方法：加个_display:inline:属性，例如<div style="float:left;margin-left: 10px;_display: inline;"></div>3.ie6下的浮动元素和非浮动元素间出现3像素BUG问题说明：这也是ie6一个著名的bug,当一个元素浮动时，同级别的文字没有浮动，在ie6下它们之间就会产生3个像素的bug。
例如：<div><img style="float: left;" src=""/>摘要摘要摘要摘要</div>,图片和文字就会出现3像素解决方法：方法一，两个元素都浮动，如：<div><img style="float: left;" src=""/><span style="float: left;">摘要摘要摘要摘要</span></div>;方法二，这种设计时一般图片和文字要有间隙的，做个ie6的hack就行,如：<div><img style="float: left;" src=""/><span style="margin-right: 5px;_margin-right: 2px;">摘要摘要摘要摘要</span></div>4.li在IE中底部空行问题说明：当li里面有两个以上的浮动元素时，li的下面就会产生一条空白间隙，例如<ul class="tlist"><li><span style="float: left;">栏目</span><a style="float: left;" href="#" target="_blank">标题标题标题</a></li></ul>解决方法：这个问题和第一个问题很相似，解决方法也是一样，在li上加个垂直方向的属性，例如：<ul class="tlist"><li style="vertical-align: top;"><span style="float: left;">栏目</span><a style="float: left;" href="#" target="_blank">标题标题标题</a></li></ul>5.IE6样式中文注释后引发失效问题说明：这是ie6 出现的奇怪现象。
html常见兼容性问题及解决方法
html常 见 兼 容 性 问 题 及 解 决 方 法
1. 双边距 BUG float 引起的 使用 display 2.3 像素问题 使用 float 引起的， 使用 dislpay:inline-3px 3.超链接 hover 点击后失效 使用正确的书写顺序 link visited hover active 4.Ie z-index 问题 给父级添加 position:relative 5.Png 透明 使用 js 代码 改 6.Min-height 最小高度 ！Important 解决 7.select 在 ie6 下遮盖 使用 iframe 嵌套 8.为 什 么 没 有 办 法 定 义 1px 左 右 的 宽 度 容 器 （ IE6 默 认 的 行 高 造 成 的 ， 使 用over:hidden,zoom:0.08 line-height:1px） 9.IE5-8 不支持 opacity，解决办法： .opacity { opacity: 0.4 filter: alpha(opacity=60); /* for IE5-7 */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/ } 10. IE6 不支持 PNG 透明背景，解决办法: IE6 下使用 gif 图片
Байду номын сангаас
如何处理前端开发中常见的兼容性问题(四)
前端开发中常见的兼容性问题是一项不可避免的挑战。
不同的浏览器、操作系统以及设备都可能导致页面在不同环境下的呈现差异。
因此，开发人员需要采取一些有效的方法来处理这些问题，以确保网站能在各种环境中正常运行。
本文将讨论一些常见的兼容性问题，并提供建议来处理这些问题。
一、HTML和CSS兼容性问题HTML和CSS是前端开发中最基本的技术。
然而，不同浏览器对标准的解析和渲染方式可能存在差异，导致网页的样式和布局出现问题。
为了解决这些问题，开发人员可以采取以下方法：1. 使用标准化的HTML和CSS代码，遵循W3C的规范。
这样可以确保代码在大多数浏览器中更稳定地运行。
2. 使用CSS3提供的新特性时要小心，因为一些旧版本的浏览器可能不支持这些特性。
在使用新特性之前，可以查询浏览器的兼容性表格，以确保代码在各种浏览器中正常工作。
3. 针对特定浏览器的兼容性问题，可以使用CSS前缀或特定的Hack来解决。
但是，这种方法不够优雅，最好避免使用。
二、JavaScript兼容性问题JavaScript是前端开发中最常用的编程语言之一。
然而，不同浏览器对JavaScript的实现有所差异，这可能导致代码在某些浏览器中无法正常工作。
以下是一些处理JavaScript兼容性问题的方法：1. 使用JavaScript库或框架，如jQuery或React，它们可以处理跨浏览器兼容性问题，并提供了一致的接口。
这样可以减少手动处理兼容性问题的工作量。
2. 在编写JavaScript代码时，应遵循标准的ECMAScript规范，并使用浏览器支持的API。
避免使用特定浏览器支持的非标准API，以确保代码在各种浏览器中正常运行。
3. 测试代码在不同浏览器中的表现，可以使用一些跨浏览器测试工具，如Selenium或PhantomJS。
这些工具可以模拟不同浏览器环境，并帮助开发人员发现和修复兼容性问题。
三、移动设备兼容性问题如今，越来越多的人使用移动设备浏览网页。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。
缺点是要控制内容不要换行7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。
参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
9.在 mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反，据阿捷的说法! important这个属性IE不能识别，但别的浏览器可以识别。
所以在IE下其实解释成这样： div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx! important;11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;}就能解决大部分问题注意事项：1、float的div一定要闭合。
例如：(其中floatA、floatB的属性已经设置为float:left;) <#div id=”floatA” > <#div id=”floatB” ><#div id=”NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。
这段代码在IE中毫无问题，问题出在FF。
原因是NOTfloatC并非float 标签，必须将float标签闭合。
在 <#div class=”floatB”><#div class=”NOTfloatC”>之间加上 <#div class=”clear”>这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
并且将clear这种样式定义为为如下即可： .clear{clear:both;}此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的box 的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义： .colwrapper{ overflow:hidden; zoom:1;margin:5px auto;}2、margin加倍的问题设置为float的div在ie下设置的margin会加倍。
这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline; 例如：<#div id=”imfloat”>相应的css为 #IamFloat{float:left;margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/} 3、关于容器的包涵关系很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。
在IE中，外层的宽度会被内层更宽的div挤破。
一定要用Photoshop 或者Firework量取像素级的精度。
4、关于高度的问题如果是动态地添加内容，高度最好不要定义。
浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。
（似乎有时候不会自动往下撑开，不知道具体怎么回事）5、最狠的手段 - !important;如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下 .tabd1{background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style f or IE */}值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过IE7.0出来了，对CSS的支持又有新问题。
浏览器多了，网页兼容性更差了，疲于奔命的还是我们，为解决IE7.0的兼容问题，找来了下面这篇文章：现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！搜索了一下，找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：#example { color: #333; } /* Moz */* html #example { color: #666; } /* IE6 */ *+html #example { color: # 999; } /* IE7 */那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999.关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一、CSS HACK以下两种方法几乎能解决现今所有HACK.1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)2, IE6/IE77对FireFox*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明：二、万能 float 闭合关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix”即可,屡试不爽.三、其他兼容技巧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; } /* Moz */* html #1 { color: #666; } /* IE6 */*+html #1 { color: #999; } /* IE7 */那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
2 css布局中的居中问题主要的样式定义如下：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 浮动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;IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。