下载文档原格式
【移动端】常见CSS兼容问题及解决⽅案【移动端】常见CSS 兼容问题及解决⽅案1. 安卓浏览器看背景图⽚，有些设备会模糊。
因为⼿机分辨率太⼩，如果按照分辨率来显⽰⽹页，字会⾮常⼩，安卓⼿机devicePixelRatio⽐较乱，有1.5的，有2的也有3的。
想让图⽚在⼿机⾥显⽰更为清晰，必须使⽤2x的背景图来代替img标签（⼀般情况都是⽤2倍），或者指定background⼀size:contain;都可以2. 防⽌⼿机中⽹页放⼤和缩⼩<meta name="viewport" content="width=device⼀width, initial⼀scale=1.0, maximum⼀scale=1.0,user⼀scalable=0" />3. apple⼀mobile⼀web⼀app⼀capable是设置Web应⽤是否以全屏模式运⾏。
<meta name="apple⼀mobile⼀web⼀app⼀capable" content="yes">如果content设置为yes，Web应⽤会以全屏模式运⾏，反之，则不会。
content的默认值是no，表⽰正常显⽰;也可以通过只读属性window.navigator.standalone来确定⽹页是否以全屏模式显⽰。
4. format⼀detection启动或禁⽤⾃动识别页⾯中的电话号码。
语法：<meta name="format⼀detection" content="telephone=no">默认情况下，设备会⾃动识别任何可能是电话号码的字符串。
设置telephone=no可以禁⽤这项功能。
5. html5调⽤安卓或者ios的拨号功能html5提供了⾃动调⽤拨号的标签，只要在a标签的href中添加tel:就可以了。
CSS样式的跨浏览器兼容性测试与处理随着互联网的发展，各种浏览器和移动设备不断涌现，用户使用的浏览器多样化，不同浏览器对CSS样式的解析和渲染也存在差异，这就对前端开发人员提出了更高的要求，他们需要保证网站在不同浏览器下的显示效果一致,而不会因为浏览器的差异而导致页面布局错乱、样式失效等问题。
因此，CSS样式的跨浏览器兼容性测试与处理成为一项非常重要的工作。
一、兼容性测试在开始进行CSS样式的跨浏览器兼容性处理之前，首先需要进行兼容性测试，以确定不同浏览器下的样式表现差异。
常用的兼容性测试方法有以下几种：1. 布局测试：通过在不同浏览器中打开网页，观察页面布局是否一致。
比如，页面的盒模型、布局结构、元素位置等需要保持一致。
2. 样式测试：针对不同的CSS属性和样式效果，检查页面在不同浏览器中的表现是否一致。
比如，字体、颜色、边框、背景等样式属性的显示效果。
3. 交互测试：测试网页中的交互效果，如悬停、点击、滚动等是否在不同浏览器中正常工作。
4. 性能测试：测试页面在不同浏览器中的加载速度和响应性能，确保页面在各个浏览器中都能正常快速加载。
二、兼容性处理在完成兼容性测试后，针对不同浏览器的兼容性问题，需要进行相应的处理。
以下是一些常见的兼容性处理方法：1. 浏览器前缀：不同浏览器厂商会为一些实验性的CSS属性添加前缀，以示区别。
为了使样式在不同浏览器中生效，需要添加相应的前缀。
例如，-webkit-表示Webkit内核的浏览器，-moz-表示Firefox浏览器。
2. CSS Hack：CSS Hack指的是使用一些特定的CSS语法或属性来针对特定的浏览器进行样式的设置。
虽然CSS Hack并不推荐使用，但在特定情况下，可以作为一种兼容性处理的方法。
3. 重置样式：不同浏览器对默认样式的解析存在差异，为了统一页面的样式，可以在页面的顶部添加一个CSS重置样式表，将浏览器的默认样式重置为统一的基准样式。
CSS兼容性挑战与应对策略：基础知识习题及答案解析（答案见尾页）一、选择题1. 以下哪些CSS属性是不兼容的？A. display: none;B. margin: 0;C. padding: 0;D. vertical-align: middle;2. 在哪种情况下，使用"!important"可以解决CSS兼容性问题？A. 当浏览器的渲染引擎不同的时候B. 当浏览器的版本号不同的时候C. 当元素的类型不同的时候D. 当元素的属性不同的时候3. 关于CSS属性值的表示，下列哪个是正确的？A. 长度可以使用px、em、rem为单位B. 颜色可以使用RGB、HEX、NAME为单位C. 字体大小可以使用pt、pc、px为单位D. 布局方式可以使用flexbox、grid、float为单位4. 清除浮动通常使用哪个CSS属性？A. clearB. floatC. overflowD. margin5. 以下哪些CSS属性在旧版本的浏览器中可能存在兼容性问题？A. display: none;B. position: relative;C. top: 10px;D. left: 20px;6. 如何使用CSS属性确保在不同浏览器中的兼容性？A. 使用"@supports"来检查浏览器支持某个特性B. 使用"@import"来引入其他样式表C. 使用"@import"来定义样式规则D. 使用"@media"来响应式设计7. 哪个CSS选择器用于选择HTML元素的第一行文本？A. "p:first-child { ... }"B. "h1:first-child { ... }"C. "tr:first-child td:first-child { ... }"D. ":first-line { ... }"8. CSS中的"z-index"属性用于控制元素的层叠顺序，以下哪个值可以让一个元素覆盖另一个元素？A. -1B. 0C. 1D. 29. 要解决浏览器兼容性问题，可以考虑使用以下哪一种方法？A. 使用"!important"B. 使用"@import"C. 使用"@supports"D. 使用"@media"10. 在CSS中，如何设置一个元素的宽度和高度？A. width: 100px;B. height: 100px;C. width: 100%;D. height: 100%;11. 以下哪些方法可以用来解决浏览器兼容性问题？A. 使用"@supports"来检查浏览器支持某个特性B. 使用"@import"来引入其他样式表C. 使用"@import"来定义样式规则D. 使用"@media"来响应式设计12. 当使用"<link>"标签引入外部样式表时，如果该样式表中使用了不兼容的CSS属性或值，请问以下哪个选项可以解决这个问题？A. 忽略该错误B. 警告用户C. 替换不兼容的属性或值D. 禁止访问该网页13. 使用"font-family"属性设置多行文字时，以下哪个值可以指定第一行文字？A. "lorem ipsum dolor sit amet"B. "Lorem ipsum dolor sit amet"C. "Lorem ipsum dolor sit amet, consectetur adipiscing elit."D. "lorem ipsum dolor sit amet"14. 要避免浏览器兼容性问题，以下哪个做法是正确的？A. 使用最少的CSS属性B. 避免使用"@import"引入外部样式表C. 使用"@supports"来检查浏览器支持某个特性D. 使用"@media"来响应式设计15. 哪个CSS属性用于设置元素的垂直对齐方式？A. "display"B. "vertical-align"C. "margin"D. "width"16. 在CSS中，如何设置一个元素的字体样式？A. "font-size: 16px;"B. "font-size: 16px; font-family: Arial, sans-serif;"C. "font-size: 16px; font-family: " times new roman", serif;"D. "font-size: 16px;"二、问答题1. 什么是常见的CSS不兼容属性？2. 如何解决浏览器兼容性问题？3. CSS前缀和后缀是什么？4. 如何使用CSS前缀？5. 如何使用CSS后缀？6. 什么是特性选择器？7. 如何使用特性选择器？8. 什么是CSS兼容性？9. 为什么需要解决浏览器兼容性问题？10. CSS prefixed 和 postfix 有什么区别？参考答案选择题：1. D2. A3. A4. A5. BC6. A7. D8. D9. C 10. A11. AD 12. C 13. D 14. A 15. B 16. B问答题：1. 什么是常见的CSS不兼容属性？常见的CSS不兼容属性包括清除浮动（clearfix）、边框（border）、定位（position）和字体样式（font-style）。
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样式兼容性的检测与处理方法一.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行为文件实现圆角效果*/}```通过以上处理，我们可以在不同浏览器中实现圆角按钮的效果，保证了网页在各个环境下的兼容性。
webkit css兼容写法Webkit是一个开源的浏览器引擎，常见于Safari和Chrome等浏览器。
为了确保在使用这些浏览器时样式能够正常显示，你可能需要使用一些特定的CSS兼容写法。
以下是一些常见的WebKit兼容写法：1. 前缀：WebKit浏览器通常需要使用特定的CSS前缀。
例如，你可能需要添加`-webkit-` 前缀来确保样式在WebKit浏览器中正常工作。
```css/* 示例：设置渐变背景*/background: -webkit-linear-gradient(top, #ffcc00, #ff6600);```2. 滚动条样式：如果你希望自定义滚动条的样式，你可能需要使用WebKit专有的样式。
```css/* 示例：自定义滚动条样式*/::-webkit-scrollbar {width: 10px;}::-webkit-scrollbar-thumb {background-color: #666;}```3. 弹性盒子布局：在一些情况下，弹性盒子布局可能需要添加Webkit前缀。
```css/* 示例：弹性盒子布局*/display: -webkit-box;display: -webkit-flex;display: flex;```4. 文本溢出省略号：在WebKit浏览器中，你可能需要使用`-webkit-line-clamp` 来实现多行文本溢出省略号的效果。
```css/* 示例：多行文本溢出省略号*/display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 3; /* 显示的行数*/```这些只是一些例子，具体需要使用哪些兼容写法取决于你的具体样式和布局需求。
在编写CSS时，最好查阅相关文档以确保你的样式在不同的浏览器中都能正确显示。
解决客户端开发中常见的兼容性问题在当前的技术潮流中，客户端开发越来越受到重视。
然而，随着不同的操作系统、浏览器和设备的不断涌现，兼容性问题成为客户端开发中不可避免的挑战。
本文将分析并探讨客户端开发中常见的兼容性问题，并提供一些解决方案。
一、CSS样式兼容性CSS样式在不同的浏览器中会出现不同的渲染结果，这给开发者带来了极大的困扰。
为了解决这个问题，开发者可以采用以下方法：1. 使用CSS重置文件：CSS重置文件能够将不同浏览器的默认样式重置为统一的基本样式，从而减少兼容性问题。
2. 使用CSS框架：流行的CSS框架，如Bootstrap和Foundation，提供了跨浏览器兼容性的解决方案，开发者可以借助这些框架快速构建兼容性良好的界面。
3. 使用兼容性前缀：不同浏览器对CSS3属性的支持程度不同，为了保证兼容性，开发者可以使用不同厂商的前缀，如-moz-、-webkit-和-ms-。
二、JavaScript兼容性JavaScript是客户端开发中必不可少的一部分，然而不同浏览器对JavaScript的支持程度也有所差异。
以下是解决JavaScript兼容性问题的一些方法：1. 使用Feature Detection：使用特性检测来判断浏览器是否支持某个JavaScript特性，根据不同的支持程度采取不同的处理方式。
2. 使用Polyfills和Shims：Polyfills是一种JavaScript代码片段，用于在不支持某个特性的浏览器上模拟实现该特性。
Shims则提供了一种基于浏览器功能的简易解决方案。
3. 优雅降级和渐进增强：在开发过程中，可以通过优雅降级或渐进增强的方式，在不同的浏览器中提供不同的用户体验。
三、移动端兼容性随着移动设备的普及，开发移动端应用成为不可忽视的趋势。
然而，不同的设备、操作系统和屏幕尺寸给移动端开发带来了更多的兼容性问题。
以下是一些解决移动端兼容性问题的建议：1. 使用响应式设计：采用响应式设计的方式可以使页面根据不同的屏幕尺寸和设备特性自动适应布局和样式。
前端开发常见的跨浏览器兼容性问题在前端开发中，跨浏览器兼容性问题是一项常见而又具有挑战性的任务。
由于不同浏览器的设计理念、实现机制和对Web标准的支持程度都不尽相同，导致同一份代码在不同浏览器上的表现可能会有所差异甚至出现错误。
有效地解决跨浏览器兼容性问题，不仅可以提升用户体验，还能保证网站在各个浏览器上都能正常运行。
本文将介绍前端开发常见的跨浏览器兼容性问题，并给出相应的解决方案。
1. CSS兼容性问题CSS兼容性问题是前端开发中最常见的问题之一。
不同浏览器对CSS标准的支持程度各不相同，常见的兼容性问题包括盒模型的解析差异、浮动元素引起的布局问题、定位属性（如position和z-index）的兼容性差异等。
解决这些问题的方法包括使用CSS Reset来统一不同浏览器的默认样式、选择合适的CSS选择器以确保样式的正确应用、使用浏览器前缀（-webkit-、-moz-、-o-等）来适配不同浏览器，以及使用CSS Hack和Polyfills来处理特定浏览器的兼容性问题。
2. JavaScript兼容性问题JavaScript兼容性问题主要集中在浏览器对JavaScript标准（如ECMAScript规范）的支持程度和对各种JavaScript API（如DOM操作、AJAX、Canvas等）的实现方式上。
解决这些问题的方法包括使用特性检测（feature detection）而非浏览器检测（browser detection）来判断浏览器支持的功能，使用标准的JavaScript语法和API来编写代码以确保在不同浏览器上的正常执行，同时使用浏览器兼容性库（如Modernizr、Polyfills等）来填补浏览器的功能差异。
3. HTML语义化和结构兼容性问题HTML语义化是指使用正确的HTML标记和结构来表达文档的含义和信息，而兼容性问题则主要集中在不同浏览器对HTML标签和结构的解析差异上。
前端兼容性面试题在前端开发中，兼容性是一个非常重要的考虑因素。
由于不同浏览器、操作系统和设备之间存在差异，开发者需要确保网站或应用程序能够在各种环境下正常运行。
为了帮助你准备前端兼容性面试，下面将介绍一些常见的兼容性问题以及解决方案。
一、CSS兼容性1. 盒模型差异盒模型指的是元素的宽度和高度的计算方式。
在标准盒模型中，元素的宽度和高度不包括边框和内边距。
而在IE盒模型中，元素的宽度和高度包括边框和内边距。
解决方案：使用CSS的box-sizing属性，将其值设置为border-box，可以统一盒模型的计算方式。
2. 浮动与清除浮动在某些浏览器中，浮动元素可能会导致父容器的高度塌陷，影响页面布局。
解决方案：可以使用clearfix类来清除浮动，或者使用伪元素::after来清除浮动。
3. CSS选择器的兼容性不同浏览器对CSS选择器的支持程度不同，某些选择器可能无法在所有浏览器中正常工作。
解决方案：选择合适的选择器，或者使用JavaScript来处理特定的选择器。
二、JavaScript兼容性1. DOM操作差异不同浏览器对DOM操作的支持也存在一定差异，例如访问和修改元素的属性、样式、事件处理等。
解决方案：使用现代的方法和属性，如果必须要兼容旧版本的浏览器，可以使用条件注释或特性检测来判断浏览器并采取相应的方式。
2. 事件处理在将事件绑定到元素上时，不同浏览器对事件处理的方式也不同，例如事件监听、事件对象的获取等。
解决方案：使用现代的事件处理方式，例如addEventListener方法，并使用条件注释或特性检测来处理旧版浏览器。
三、响应式设计与移动兼容性1. 媒体查询在响应式设计中，使用媒体查询可以根据不同的屏幕尺寸应用不同的样式。
解决方案：使用CSS3的媒体查询，并提供兼容性样式备用。
2. 移动设备兼容性移动设备上的浏览器可能与桌面浏览器在CSS和JavaScript的支持上存在差异。
解决方案：使用移动优先的设计方法，适当使用前缀生成器和流行的移动端框架如Bootstrap等。
目录目录 (1)一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表 (3)1) 区别IE和非IE浏览器 (3)2) 区别IE6,IE7,IE8,FF (3)3) 区别IE6、IE7、Firefox (方法1) (4)4) 区别IE6、IE7、Firefox (方法2) (4)5) 区别IE7、Firefox (4)6) 区别IE6、IE7 (方法1) (4)7) 区别IE6、IE7 (方法2) (5)8) 区别IE6、Firefox (5)二、IE 的if条件Hack (5)三、对齐产生的问题 (6)1) div的居中对齐问题 (6)2) div中文字垂直居中对齐的问题 (7)3) 怎样使一个层垂直居中于浏览器中 (7)4) 如何对齐文本与文本输入框 (7)四、宽高问题 (7)1) IE6下容器的宽度和FF解释不同 (7)2) 页面的最小宽度 (8)3) 为什么无法定义1px左右高度的容器 (8)4) Firefox 关于DIV高度无法自适应 (8)5) div重叠的现象 (9)6) IE与宽度和高度的问题 (9)7) div嵌套时，外层div高度不能自适应 (10)8) div嵌套时y 轴上外层div 到内层div 的距离的问题 (10)9) padding，marign，height，width 的傻瓜式解决技巧 (10)10) FORM标签 (10)五、浮动 (11)1) margin加倍的问题 (11)2) DIV浮动IE文本产生3象素的bug (11)3) 怎么样才能让层显示在FLASH之上呢 (11)4) float的div闭合;清除浮动 (12)5) 自适应高度 (13)六、列表类 (13)1) UL的padding与margin (13)2) ul和ol列表缩进问题 (14)3) list-style-image无法准确定位 (14)4) LI中内容超过长度后以省略号显示的方法 (14)七、链接 (14)1) 游标手指cursor (14)2) ,给a标签内内容加上样式, (15)3) 链接(a标签)的边框与背景 (15)4) ff不支持expression 例如去掉链接的边框要分别写不同的css (15)5) 超链接访问过后hover样式就不出现的问题 (15)八、背景、图片类 (15)1) IE6下为什么图片下有空隙产生 (15)2) 图片垂直于容器内 (15)3) background 显示问题 (16)4) 背景颜色无法显示 (16)5) 背景透明问题 (17)九、其他问题 (17)1) 如何使连续长字段自动换行 (17)2) 为什么web标准中IE无法设置滚动条颜色了 (18)3) 属性选择器(这个不能算是兼容,是隐藏css的一个bug) (19)4) IE捉迷藏的问题 (19)5) BOX模型解释不一致问题 (19)6) IE6下绝对定位的容器内文本无法正常选择 (19)7) CSS双线凹凸边框 (19)8) IE选择符空格BUG (20)9) ff不支持<body scroll="no" > scroll属性 (21)10) ff不支持数据岛绑定 (21)11) ff不能用.click();方法打开链接 (21)12) 目前FF2.0为止都不支持IE的name锚点 (22)一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表不同的浏览器对CSS的解释都有一点出入，特别是padding, line-height这些要细微控制的地方，下面的hack基本可以解决这个问题：详细查看•在属性前加下划线(_)，那么此属性只会被IE6解释•在属性前加星号(*)，此属性只会被IE7解释•在属性值后面加"\9"，表示此属性只会被IE8解释各浏览器CSS hack兼容表：代码如下:#test{color:red; /* 所有浏览器都支持*/color:red !important; /* Firefox、IE7支持*/_color:red; /* IE6支持*/*color:red; /* IE6、IE7支持*/*+color:red; /* IE7支持*/color:red\9; /* IE6、IE7、IE8支持*/color:red\0; /* IE8支持*/}body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持*/1)区别IE和非IE浏览器【区别符号】：「*」、「\9」#tip{background:blue; /*非IE背景藍色*/background:red\9; /*IE6、IE7、IE8背景紅色*/}（详细查看）2)区别IE6,IE7,IE8,FF【区别符号】：「*」、「_」、「!important」#tip{background:blue; /*Firefox背景变蓝色*/background:red\9; /*IE8背景变红色*/*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/}【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE 各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。
css兼容.txt男人偷腥时的智商仅次于爱因斯坦。
美丽让男人停下，智慧让男人留下。
任何东西都不能以健康做交换。
在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网，就应该更注意IE6 IE7 FF对CSS样式的兼容，不然，你的网乱可能出去不想出现的效果！所有浏览器通用height: 100px;IE6 专用_height: 100px;IE6 专用*height: 100px;IE7 专用*+height: 100px;IE7、FF 共用height: 100px !important;一、CSS 兼容以下两种方法几乎能解决现今所有兼容.1, !important (不是很推荐，用下面的一种感觉最安全)随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)代码:<style>#wrapper {width: 100px!important;width: 80px;}</style>2, IE6/IE77对FireFox <from 针对firefox ie6 ie7的css样式>*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.代码:<style>#wrapper { width: 120px; }*html #wrapper { width: 80px;}*+html #wrapper { width: 60px;}</style>注意:*+html 对IE7的兼容必须保证HTML顶部有如下声明：代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"" /TR/html4/loose.dtd">二、万能 float 闭合(非常重要!) 可以用这个解决多个div对齐时的间距不对，关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix” 即可,屡试不爽.代码:<style>.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix {display:inline-block;}.clearfix {display:block;}</style>三、其他兼容技巧(相当有用)1, FF下给div 设置padding 后会导致width 和height 增加, 但IE不会.(可用!important解决)2, 居中问题.1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过 vetical-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.贴上代码:兼容代码:兼容最推荐的模式。
.submitbutton {float:left;width: 40px;height: 57px;margin-top: 24px;margin-right: 12px;}*html .submitbutton {margin-top: 21px;}*+html .submitbutton {margin-top: 21px;}什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。
而兼容就是一种办法，能让你在一个CSS里面独立的写支持不同浏览器的样式。
这下就和谐了。
呵呵！最近微软发布的IE7浏览器的兼容性确实给一些网页制作人员添加了一个沉重的负担，虽然IE7已经走向标准化，但还是有许多和FF不同的地方，所以需要用到IE7的兼容，有许多朋友问过IE7的兼容是什么，其实我也不知道。
暂时还没找到IE7专用的兼容。
除了前面那片文章，《针对firefox ie6 ie7的css样式》中的兼容方式也是很好用的。
有一点逻辑思想的人都会知道可以用IE和FF的兼容结合起来使用，下面介绍三个兼容，例如：（适合新手，呵呵，高手就在这里路过吧。
）程序代码第一个兼容，IE FF 所有浏览器公用（其实也不算是兼容）height:100px;第二个兼容 IE6专用_height:100px;第三个兼容 IE6 IE7公用*height:100px;介绍完了这三个兼容了，下面我们再来看看如何在一个样式里分别给一个属性定义IE6 IE7 FF专用的兼容，看下面的代码，顺序不能错哦：程序代码height:100px;*height:120px;_height:150px;下面我简单解释一下各浏览器怎样理解这三个属性：在FF下，第2、3个属性FF不认识，所以它读的是 height:100px;在IE7下，第三个属性IE7不认识，所以它读第1、2个属性，又因为第二个属性覆盖了第一个属性，所以IE7最终读出的是第2个属性 *height:120px;在IE6下，三个属性IE6都认识，所以三个属性都可以读取，又因为第三个属性覆盖掉前2个属性，所以IE6最终读取的是第三个属性。
1 针对firefox ie6 ie7的css样式现在大部分都是用!important来兼容，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的兼容方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样：#1 { color: #333; }* html #1 { color: #666; }*+html #1 { color: #999; }那么在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 ffwidth:600px;//for ff+ie6.0width :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;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> 放到 <body> 标签下，然后为div指定一个类：然后CSS这样设计：#container{min-width: 600px;width:e­xpression(document.body.clientWidth < 600? “600px”: “auto” );}第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。
它实际上通过Javascript的判断来实现最小宽度。
