css兼容性解决方法
自己整理的CSS兼容解决方法

自己整理的C SS兼容解决方法您是第1093位浏览者CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fi reofx的兼容性处理方法并整理了一下.对于we b2.0的过度,请尽量用xht ml格式写代码,而且DOCTY PE 影响 CSS处理,作为W3C的标准,一定要加DOCT YPE声明.CS S技巧1.div的垂直居中问题v ertic al-al ign:m iddle; 将行距增加到和整个DIV一样高 li ne-he ight:200px; 然后插入文字,就垂直居中了。
缺点是要控制内容不要换行2. ma rgin加倍的问题设置为f loat的div在i e下设置的margi n会加倍。
这是一个i e6都存在的bug。
解决方案是在这个di v里面加上displ ay:in line;例如:<#div id=”imflo at”>相应的cs s为#I amFlo at{f loat:left;marg in:5p x;/*I E下理解为10px*/dis play:inlin e;/*I E下再理解为5px*/}3.浮动ie产生的双倍距离#box{float:left; wid th:100px;margi n:0 0 0 100px;//这种情况之下IE会产生200px的距离 dis play:inlin e; //使浮动忽略}这里细说一下bl ock与i nline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);In line元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);#box{displ ay:bl ock;//可以为内嵌元素模拟为块元素 disp lay:i nline; //实现同一行排列的效果dipla y:tab le;4 IE与宽度和高度的问题IE 不认得min-这个定义,但实际上它把正常的w idth和heigh t当作有m in的情况来使。
CSS浏览器兼容性处理解决不同浏览器的样式差异

CSS浏览器兼容性处理解决不同浏览器的样式差异CSS浏览器兼容性处理:解决不同浏览器的样式差异在网页设计与开发过程中,我们经常会遇到在不同浏览器下显示效果不一致的情况。
这是由于不同浏览器对CSS样式的解析和支持程度不同导致的。
为了解决这些浏览器的兼容性问题,我们需要采取一些措施,使得网页在各种浏览器下都能够达到一致的效果。
本文将介绍一些常见的CSS兼容性处理技巧,帮助您解决不同浏览器的样式差异。
一、CSS hack技巧1. 选择器优先级在CSS中,选择器的优先级决定了哪个样式会被浏览器应用。
可以通过提高选择器的优先级来确保样式被正确地应用。
一般来说,ID选择器的优先级最高,紧接着是类选择器和属性选择器,最后是标签选择器。
2. 浏览器前缀某些CSS属性在不同浏览器下需要添加前缀才能得到正确的效果,例如-webkit、-moz和-o等。
通过添加不同浏览器的前缀,可以确保样式在各个浏览器中一致地显示。
可以使用CSS预处理器如Sass或Less来自动生成带有前缀的代码。
3. 条件注释条件注释是一种只有特定浏览器会解析的代码,通过条件注释可以为不同浏览器提供不同的样式。
例如:<!--[if IE]>xxx<![endif]--> 可以仅在IE浏览器中应用xxx样式,从而解决IE浏览器的兼容性问题。
二、CSS兼容性库1. Normalize.cssNormalize.css是一个跨浏览器的CSS文件,它几乎可以为所有的HTML元素提供一致的默认样式。
通过引入Normalize.css,可以统一各个浏览器的默认样式,从而避免不同浏览器之间的样式差异。
2. AutoprefixerAutoprefixer是一个基于CSS规范的自动添加浏览器前缀的工具。
它可以根据你设置的浏览器兼容范围自动添加所需的前缀,大大简化了处理浏览器兼容性的工作。
三、媒体查询1. 响应式设计媒体查询是CSS3的一个重要特性,它可以根据不同的设备或屏幕尺寸应用不同的样式,从而实现响应式设计。
解决CSS浏览器兼容性问题的4种方案

解决CSS浏览器兼容性问题的4种⽅案前端是⼀个苦逼的职业,不仅因为技术更新快,⽽且要会的东西实在太多了,更让⼈头疼的是,还要⾯临各种适配、兼容性问题。
为什么会有浏览器兼容性问题?还不是因为浏览器⼚商太多了!Chrome,Frirefox,Safari,Edge,IE6,IE7,IE8,IE9...360安全浏览器,qq浏览器,世界之窗,TT,搜狗,opera,maxthon(傲游)……关键是不同⼚商,甚⾄同⼀⼚商不同版本,对同⼀段CSS的解析效果也不⼀致,这就导致了页⾯显⽰效果不统⼀,也就带来了兼容性问题。
多么希望Chrome能够⼀统江湖啊~~⽬前各浏览器市场份额浏览器这么多,我们也不可能每⼀个都要去兼容,对于⽤户量⼀般的产品,把主流浏览器的适配做好,就已经很不错啦。
根据百度流量研究院提供的2018年8⽉⾄2019年2⽉的数据可以看出,Chrome占⽐46.28%,IE系仍然占有很⼤⽐重,任重⽽道远啊~CSS浏览器兼容性问题的解决思路和⽅案今天,不想去关注太多细节问题,⽐如那个css样式需要我们去兼容,⽽是想讨论⼀下⼤的解决思路,主要包括4个⽅⾯,浏览器CSS样式初始化、浏览器私有属性,CSS hack语法和⾃动化插件。
1. 浏览器CSS样式初始化由于每个浏览器的css默认样式不尽相同,所以最简单有效的⽅式就是对其进⾏初始化,相信很多朋友都写过这样的代码,在所有CSS开始前,先把marin和padding都设为0,以防不同浏览器的显⽰效果不⼀样。
*{margin: 0;padding: 0;}关于浏览器CSS样式初始化,经验不丰富的话,可能也不知道该初始化什么,这⾥给⼤家推荐⼀个库,Normalize.css,github star数量接近3.4万,选取展⽰其中⼏个样式设置,如下html {line-height: 1.15; /* Correct the line height in all browsers */-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */}body {margin: 0;}a {background-color: transparent; /* Remove the gray background on active links in IE 10. */}img {border-style: none; /* Remove the border on images inside links in IE 10. */}通过CSS样式初始化,相信能解决不少常规的兼容性问题,接下来再看看浏览器的私有属性。
css兼容性问题解决整套方案

CSS】最全的CSS浏览器兼容问题CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加DOCTYPE声名.CSS技巧1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。
缺点是要控制内容不要换行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.浮动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;4 IE与宽度和高度的问题 IE 不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。
前端开发中常见的浏览器兼容性问题与解决方案

前端开发中常见的浏览器兼容性问题与解决方案随着移动互联网及云计算的迅速发展,前端开发也越来越重要。
然而,不同浏览器之间的差异性造成了许多兼容性问题,给开发者带来了不小的困扰。
本文将介绍一些前端开发中常见的浏览器兼容性问题,并提供一些解决方案。
一、CSS兼容性问题1. 盒模型差异:不同浏览器对盒模型的解析方式有所不同,主要体现在边框和内边距的计算上。
解决方案是使用CSS的box-sizing属性将盒模型设置为border-box,以保证在不同浏览器中的显示效果一致。
2. 行内元素的内外边距:在IE6及更早的版本中,行内元素会忽略内外边距的设置。
解决方案是将行内元素转换为块级元素,或者使用display:inline-block属性来呈现行内块元素的效果。
3. 清除浮动:不同浏览器对清除浮动的方式支持度各不相同。
常用的清除浮动方法有使用overflow:hidden属性、添加空元素并清除浮动、使用clearfix类等。
二、JavaScript兼容性问题1. DOM操作差异:不同浏览器对于DOM操作的实现方式存在差异,例如通过innerHTML属性插入HTML片段在IE中可能导致内存泄漏。
解决方案是尽量使用createElement和appendChild等原生DOM方法来进行元素的动态创建和操作。
2. 事件处理差异:不同浏览器对于事件处理的机制有所不同,例如IE不支持事件捕获,而是通过attachEvent方法进行事件绑定。
解决方案是使用事件委托的方式来减少事件绑定的数量,同时可以借助框架如jQuery等来解决跨浏览器兼容性问题。
3. AJAX兼容性:不同浏览器对XMLHttpRequest对象的支持有所不同,特别是IE6及更早的版本。
解决方案是使用封装好的Ajax库或者利用浏览器的原生ActiveXObject对象来实现跨浏览器的AJAX请求。
三、HTML5兼容性问题1. 标签支持度不足:HTML5中的一些新标签如<header>、<nav>、<section>等在旧版本的浏览器中可能无法正确解析。
CSS浏览器兼容性的各种代码解决方案

CSS浏览器兼容性的各种代码解决方案1. 使用厂商前缀:不同浏览器厂商会实现一些试验性的CSS属性和值,为了兼容不同的浏览器,我们可以使用相应的厂商前缀。
例如,对于使用Flex布局的情况,可以使用-webkit-、-moz-和-ms-等前缀来适应不同的浏览器引擎。
2. 使用CSS Reset:浏览器的默认样式存在差异,使用CSS Reset 可以将所有浏览器的默认样式统一、常见的CSS Reset方案有Eric Meyer's Reset CSS和normalize.css等。
3. 使用CSS Hack:CSS Hack是通过特定的选择器和属性值来针对特定的浏览器进行样式修正的技巧。
例如,为了兼容IE 6、7、8浏览器,可以使用条件注释或特定的选择器来应用不同的样式。
5.使用媒体查询:媒体查询可以根据不同的设备和屏幕大小应用不同的CSS样式。
通过使用媒体查询,可以为不同的浏览器和设备提供优化的样式。
6. 使用polyfill或fallback方案:Polyfill是在旧版浏览器中填充不支持的CSS功能的JS代码。
如果一些浏览器不支持一些CSS属性,可以使用Polyfill来提供类似的效果。
Fallback方案是通过提供替代的CSS样式来兼容不支持一些属性的浏览器。
7. 使用autoprefixer:Autoprefixer是一个自动添加浏览器前缀的工具,可以根据选择的浏览器和CSS规范自动添加相应的前缀,避免手动添加前缀的繁琐工作。
8. 使用CSS3 PIE:CSS3 PIE是一个让IE6-9浏览器支持CSS3的工具,可以通过引入PIE.htc文件来实现圆角、阴影、渐变等CSS3效果在IE中的兼容显示。
9. 使用Flexbox布局:Flexbox布局是一种强大的CSS布局方式,但在不同的浏览器上存在一些兼容性问题。
可以使用-webkit-、-moz-和-ms-等前缀以及一些兼容性的属性值来解决兼容性问题。
CSS样式兼容性的检测与处理方法

CSS样式兼容性的检测与处理方法一.CSS样式兼容性的检测与处理方法CSS(层叠样式表)是一种用来描述网页样式的语言,可以控制网页的布局、字体、颜色等各个方面。
然而,由于不同浏览器或设备对CSS的支持度不同,会导致网页在不同环境下显示效果不一致或出现兼容性问题。
为了解决这些问题,本文将介绍CSS样式兼容性的检测与处理方法。
一、兼容性检测方法1.使用caniuse网站:caniuse是一个在线工具,可以查询不同属性或特性在各个浏览器中的支持情况。
根据查询结果可以了解哪些属性需要特殊处理或替代方案。
2.使用CSS兼容性前缀:不同浏览器支持不同的CSS前缀,例如-moz-、-webkit-、-o-等。
通过为CSS属性添加对应的前缀,可以使其在不同浏览器中得到正确的解析和渲染。
3.使用JavaScript检测:通过JavaScript的能力检测方法,可以判断当前浏览器是否支持某个CSS属性或特性。
根据判断结果,可以采取相应的处理方法。
二、兼容性处理方法1.渐进增强:该方法要求先考虑最基本的功能,在此基础上不断增加更高级的特性。
通过为不同浏览器提供不同的样式,确保网页在各个环境下都能正常显示。
这种方法强调向下兼容,适合对低版本浏览器提供支持的场景。
2.优雅降级:与渐进增强相反,优雅降级是先构建完整的功能,然后逐步去除一些高级特性,以适应不同浏览器或设备的限制。
这种方法强调向上兼容,适合先为高级浏览器提供更好的用户体验的场景。
3.使用CSS Hack:CSS Hack是指通过编写特定的CSS代码,以便只在特定浏览器中生效或不生效。
例如,针对IE浏览器的特殊处理,可以使用条件注释或选择器Hack等技术手段。
4.使用CSS重置样式:不同浏览器对默认样式的设置有差异,这可能导致网页在不同环境下显示效果不同。
通过引入CSS重置样式表,可以将不同浏览器的默认样式统一化,减少兼容性问题。
三、案例分析以现代浏览器对于CSS3的支持度较高为例,假设我们需要实现一个圆角按钮(border-radius属性):```css.button {border-radius: 5px;}```但是在某些旧版本的IE浏览器中,border-radius属性不受支持,因此我们需要针对IE浏览器增加特定的样式:```css.button {border-radius: 5px; /* 现代浏览器支持 */-moz-border-radius: 5px; /* Firefox 浏览器支持 */-webkit-border-radius: 5px; /* Chrome 和 Safari 浏览器支持 */behavior: url(border-radius.htc); /* 使用HTC行为文件实现圆角效果*/}```通过以上处理,我们可以在不同浏览器中实现圆角按钮的效果,保证了网页在各个环境下的兼容性。
前端开发中的常见问题解决方案

前端开发中的常见问题解决方案前言:在前端开发的过程中,我们常常会遇到各种各样的问题,其中一些问题是比较常见且普遍的。
本文将介绍一些前端开发中常见问题的解决方案,希望能够帮助读者解决开发过程中的困惑。
一、兼容性问题的解决方案在不同的浏览器和设备上,前端页面的展示效果可能存在差异,兼容性问题成为前端开发中经常遇到的一个难题。
以下是几种常见的兼容性问题解决方案:1. 使用CSS Reset或Normalize.css:不同浏览器对HTML元素的默认样式有所差异,使用CSS Reset或Normalize.css可以对这些样式进行重设,从而获得更一致的初始样式。
2. 使用CSS前缀:不同浏览器可能对某些CSS属性需要添加不同的前缀以实现相同的效果。
可以通过工具如Autoprefixer自动为CSS代码添加相应的前缀,提高兼容性。
3. 使用CSS Hack:在某些情况下,可以使用CSS Hack来针对特定的浏览器或版本设置不同的样式。
但注意,CSS Hack可能带来代码的难维护性和风险,慎用为佳。
二、性能优化的解决方案优化前端页面的性能可以提升用户体验和网站的加载速度,以下是几种常见的性能优化解决方案:1. 压缩和合并静态资源:通过压缩JavaScript、CSS和图片等静态资源的文件大小,并合并它们来减少HTTP请求次数,从而提高页面加载速度。
2. 使用CDN加速:将静态资源部署到内容分发网络(CDN)上,利用CDN的分布式节点,让用户从离自己地理位置更近的服务器获取资源,减少网络延迟,提高访问速度。
3. 延迟加载:在页面初始加载时,优先加载视觉区域内的内容,而将其他内容延迟加载,通过懒加载和异步加载的方式减少页面的加载时间。
三、调试和排查问题的解决方案在前端开发中,经常会遇到代码出错或者功能无法正常运行的情况。
以下是几种常见的调试和排查问题的解决方案:1. 使用浏览器开发者工具:现代浏览器都提供了开发者工具,可以通过查看控制台输出、监测网络请求、检查元素等功能来定位问题代码并进行调试。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响CSS 处理,作为W3C的标准,一定要加DOCTYPE声名.CSS技巧1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字,就垂直居中了。
缺点是要控制内容不要换行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.浮动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;4 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;}5.页面的最小宽度min -width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。
但IE不认得这个,而它实际上把width当做最小宽度来使。
为了让这一命令在IE上也能用,可以把一个<div> 放到<body> 标签下,然后为div指定一个类, 然后CSS这样设计:#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 第一个min-width 是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。
它实际上通过Javascript的判断来实现最小宽度。
6.DIV浮动IE文本产生3象素的bug 左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键} <div id="box"> <div id="left"></div> <div id="right"></div> </div>7.IE捉迷藏的问题当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
解决办法:对#layout使用line-height属性或者给#layout使用固定高和宽。
页面结构尽量简单。
8.float的div闭合;清除浮动;自适应高度;①例如:<#div id=”floatA”><#div id=”floatB”><#div id=”NOTfloatC”>这里的NOTfloatC 并不希望继续平移,而是希望往下排。
(其中floatA、floatB的属性已经设置为float:left;) 这段代码在IE中毫无问题,问题出在FF。
原因是NOTfloatC并非float标签,必须将float标签闭合。
在<#div class=”floatB”> <#div class=”NOTfloatC”>之间加上< #div class=”clear”>这个div一定要注意位置,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。
并且将clear这种样式定义为为如下即可:.clear{ clear:both;}②作为外部wrapper 的div 不要定死高度,为了让高度能自动适应,要在wrapper里面加上overflow:hidden; 当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。
例如某一个wrapper如下定义:.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div 后面做一个统一的背景,譬如: <div id=”page”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> 比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决<div id=”page”> <div id=”bg”style=”float:left;width:100%”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> </div> 再嵌入一个float left而宽度是100%的DIV解决之④万能float 闭合(非常重要!) 关于clear float 的原理可参见[How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上class="clearfix" 即可,屡试不爽. /* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ 或者这样设置:.hackbox{ display:table; //将对象作为块元素级的表格显示}11.高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign 时。
例:#box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } <div id="box"> <p>p对象中的内容</p> </div> 解决方法:在P对象上下各加2个空的div对象CSS 代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
12 .IE6下为什么图片下有空隙产生解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom 都可以解决.13.如何对齐文本与文本输入框加上vertical-align:middle; <style type="text/css"> <!-- input { width:200px; height:30px; border:1px solid red;vertical-align:middle; } --> </style>14.web标准中定义id与class有什么区别吗一.web标准中是不容许重复ID的,比如div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他. 二.属性的优先级问题ID 的优先级要高于class,看上面的例子三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID 来得简单.15. LI中内容超过长度后以省略号显示的方法此方法适用与IE与OP浏览器<style type="text/css"> <!-- li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } --> </style>16.为什么web标准中IE无法设置滚动条颜色了解决办法是将body换成html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- html { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; } --> </style>17.为什么无法定义1px左右高度的容器IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px18.怎么样才能让层显示在FLASH之上呢解决的办法是给FLASH设置透明<param name="wmode" value="transparent" />19.怎样使一个层垂直居中于浏览器中这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二<style type="text/css"> <!-- div { position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; } --> </style>FF与IE1. Div居中问题div设置margin-left, margin-right 为auto 时已经居中,IE 不行,IE需要设定body居中,首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。