PSD转HTML5是将设计稿还原为网页的常见开发流程，过程中最常遇到的问题就是不同浏览器对HTML5和CSS3特性的支持程度不同，导致页面渲染效果出现差异。老版本浏览器如IE8及以下、早期版本的Chrome和Firefox，可能无法识别部分新的CSS属性，进而引发样式失效、布局错位等问题。
常见兼容问题场景
在PSD转HTML5的实际开发中，以下几类问题出现频率最高：
- CSS3新增属性如border-radius、box-shadow在老版本浏览器中不生效，元素还是直角、没有阴影效果
- Flex布局在早期版本的浏览器中无法识别，导致弹性布局失效，元素排列错乱
- HTML5新增的语义化标签如<header>、<section>在IE8及以下浏览器中无法被识别，默认以行内元素渲染，布局完全混乱
- CSS3动画属性animation、transition在部分浏览器中不支持，交互效果消失
前缀加写法的核心规则
浏览器私有前缀是浏览器厂商为自家浏览器提供的实验性属性支持标识，不同内核的浏览器对应不同的前缀：
| 浏览器内核 | 对应前缀 | 代表浏览器 |
|---|---|---|
| Webkit内核 | -webkit- | Chrome、Safari、新版Edge |
| Gecko内核 | -moz- | Firefox |
| Trident内核 | -ms- | IE浏览器 |
| Presto内核 | -o- | 旧版Opera |
前缀加写法的标准顺序是：先写带所有私有前缀的属性，最后写标准无前缀的属性，这样浏览器会优先识别自身支持的前缀属性，不支持的话就会使用标准属性，保证兼容性。
具体代码示例
1. CSS3圆角属性兼容写法
设计稿中常见的圆角按钮，需要添加对应前缀保证老浏览器生效：
/* 圆角兼容写法 */
.btn {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
}
2. Flex布局兼容写法
PSD转HTML5中常用的Flex布局，老版本浏览器的实现语法和标准语法有区别，需要同时适配：
/* Flex布局兼容写法 */
.container {
display: -webkit-box; /* 老版本iOS Safari */
display: -webkit-flex; /* 新版本Webkit内核浏览器 */
display: -moz-box; /* 老版本Firefox */
display: -ms-flexbox; /* IE10 */
display: flex; /* 标准语法 */
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
3. HTML5语义化标签兼容处理
针对IE8及以下浏览器无法识别<header>、<section>等HTML5标签的问题，可以通过JS创建标签并添加块级样式解决：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>PSD转HTML5兼容示例</title>
<style>
/* HTML5标签兼容样式 */
header, section, footer, nav, article {
display: block;
}
</style>
<!-- IE8及以下识别HTML5标签的JS -->
<!--[if lt IE 9]>
<script>
(function() {
var tags = ['header', 'section', 'footer', 'nav', 'article', 'aside'];
for (var i = 0; i < tags.length; i++) {
document.createElement(tags[i]);
}
})();
</script>
<![endif]-->
</head>
<body>
<header>页面头部</header>
<section>内容区域</section>
<footer>页面底部</footer>
</body>
</html>
其他兼容优化建议
除了前缀加写法，还可以结合以下方法提升PSD转HTML5的兼容性：
- 使用CSS Reset或者Normalize.css重置浏览器默认样式，减少不同浏览器的默认样式差异
- 对于不支持的HTML5特性，可以使用Modernizr库做特性检测，在不支持的浏览器中加载对应的polyfill补丁
- 尽量少用过于前沿的、浏览器支持率不足50%的CSS属性，优先选择兼容性更好的替代实现方案
- 开发完成后使用BrowserStack等工具在主流浏览器中做多端测试，及时发现并修复兼容问题
掌握前缀加写法和对应的兼容处理方案，就能解决PSD转HTML5过程中绝大多数的浏览器不兼容问题，保证页面在不同环境下都能呈现和设计稿一致的视觉效果。