按需加载使用require.js按需加载CSSwebpack配置CSS的按需加载CSS浏览器兼容性浏览器CSS样式初始化由于每个浏览器的css默认样式不尽相同 ， 所以最简单有效的方式就是对其进行初始化 ， 在所有CSS开始前 ， 先把marin和padding都设为0 ， 以防不同浏览器的显示效果不一样（推荐初始化库Normalize.css） 。
浏览器私有属性我们经常会在某个CSS的属性前添加一些前缀 ， 比如-webkit- ， -moz-  ， -ms- ， 这些就是浏览器的私有属性 ， 出现私有属性的原因是制定HTML和CSS标准的组织W3C动作是很慢的 。通常 ， 有W3C组织成员提出一个新属性 ， 比如说圆角border-radius ， 大家都觉得好 ， 但W3C制定标准 ， 要走很复杂的程序 ， 审查等 。而浏览器商市场推广时间紧 ， 如果一个属性已经够成熟了 ， 就会在浏览器中加入支持 。为避免日后W3C公布标准时有所变更 ， 会加入一个私有前缀 ， 比如-webkit-border-radius ， 通过这种方式来提前支持新属性 。等到日后W3C公布了标准 ， border-radius的标准写法确立之后 ， 再让新版的浏览器支持border-radius这种写法 。常用的前缀有：
-moz代表firefox浏览器私有属性-ms代表IE浏览器私有属性-webkit代表chrome、safari私有属性-o代表opera私有属性对于私有属性的顺序要注意 ， 把标准写法放到最后 ， 兼容性写法放到前面
-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/-moz-transform:rotate(-3deg); /*为Firefox*/-ms-transform:rotate(-3deg); /*为IE*/-o-transform:rotate(-3deg); /*为Opera*/transform:rotate(-3deg);CSS hack有时我们需要针对不同的浏览器或不同版本写特定的CSS样式 ， 这种针对不同的浏览器/不同版本写相应的CSS code的过程 ， 叫做CSS hack ， 写法大致归纳为3种：条件hack、属性级hack、选择符级hack 。
自动化插件Autoprefixer是一款自动管理浏览器前缀的插件 ， 它可以解析CSS文件并且添加浏览器前缀到CSS内容里 ， 使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的 。把Autoprefixer添加到资源构建工具（例如Grunt）后 ， 可以完全忘记有关CSS前缀的东西 ， 只需按照最新的W3C规范来正常书写CSS即可 。如果项目需要支持旧版浏览器 ， 可修改browsers参数设置。目前webpack、gulp、grunt都有相应的插件 ， 别再让CSS兼容性浪费你的时间 。常见的CSS兼容性问题有哪些不同浏览器的标签默认的padding/margin不同 ， 通过初始化css样式可以解决 *{ margin:0;padding:0px; }IE6双边距BUG设置较小高度标签（一般小于10px）在IE6,IE7中高度超出自己设置的高度  ， 通过设置overflow:hidden;或者设置行高line-height小于你设置的高度IE下 ， 可以使用获取常规属性的方法来获取自定义属性 ， 也可以使用getAttribute()获取自定义属性Chrome中文界面下默认会将小于12px的文本强制为12px 通过加入css属性 -webkit-text-size-adjust：none;可以解决 ， 或者使用transform中的缩放属性超链接访问过后hover样式就不出现 ， 因为被点击访问过的超链接样式不再具有hover和active了  ， 解决方法是改变css属性的排列属性：L-V-H-A a:link{} → a:visited{} → a:hover{} → a:active{}IE下 ， event对象有x,y属性 ， 但是没有pageX ， pageY属性 ， 但没有x ， y属性 解决方式：通过条件- png24位的图片在IE6浏览器上出现背景 ， 解决方案是做出PNG8CSS优化及性能提升将css文件放在页面最上面 ， 多个css可合并 ， 并尽量减少http请求避免过渡约束 ， 避免使用后代选择符 ， 链式选择符 ， 多种类型选择符避免不必要的命名空间 ， 避免不必要的重复样式 ， 移除空的css规则使用具有语义的名字 ， 使用紧凑的语法避免使用 !important尽可能地精简规则 ， 尽可能合并不同类的重复规则 ， 修复解析错误正确使用display属性inline后不应该使用width、height、margin、padding以及floatinline-block后不应该使用float；block后不应该使用vertical-align不滥用浮动 ， 遵守盒模型规则不滥用web字体 ， 不声明过多font-size ， 不重复定义h1-h6 ， 不给h1-h6定义过多样式值为0时不需要任何单位标准化各种浏览器前缀WEB标准以及W3C对于结构的要求：规范的标签可以提高搜索引擎对页面的抓取效率 ， 对SEO很有帮助

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

• 垂直居中的多种方式 html中div水平居中
• 三个字大气响亮公司的名字 有什么三个字大气响亮公司的名字
• 男性常做三个动作有助强身抗衰
• 华为智慧屏怎么投屏?这三个方法完美解决! 用三个方法解决华为智慧屏投屏
• 乒乓球正手发力的三个重要环节
• 橄榄球在中国的三个阶段
• 这三个方法送给大家 微信聊天记录删了怎么恢复找回来
• 荒天帝娶的三个老婆结局谁最惨 石昊三个老婆的结局
• 安全风险评估的三个要素 信息系统安全风险评估指南
• 四大神兽被谁吃了（上古四大神兽死了哪三个,死在哪里