[分享]css兼容苹果浏览器

在开发网站时，我们经常需要考虑不同浏览器的兼容性。特别是苹果浏览器 Safari，由于其内核不同于其他浏览器，对CSS的解析也有些许不同，可能会导致网站在Safari上显示不正常。以下是一些CSS属性...

在开发网站时，我们经常需要考虑不同浏览器的兼容性。特别是苹果浏览器 Safari，由于其内核不同于其他浏览器，对CSS的解析也有些许不同，可能会导致网站在Safari上显示不正常。

以下是一些CSS属性在Safari上兼容性的问题及解决方法：

/* Safari下border-radius属性不生效 */
/* 解决方法：使用-webkit-前缀 */
div {
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

/* Safari下渐变背景色出现锯齿 */
/* 解决方法：加上-webkit-background-clip: padding-box; */
div {
    background: -webkit-linear-gradient(red, blue);
    -webkit-background-clip: padding-box;
}

/* Safari下的transition 转换特效无法生效 */
/* 解决方法：加上-webkit-前缀 */
div {
transition: width 2s;
-webkit-transition: width 2s;
}

/* Safari下文本溢出省略号不生效 */
/* 解决方法：使用-webkit-前缀 */
div {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
} 

在实际开发中，我们还需注意避免使用一些过度复杂的CSS，优先使用简单易懂的语句，这样不仅可以提升页面性能，也能避免兼容性问题。