[分享]css写法safari浏览器兼容

随着Safari浏览器在市场的占有率不断增加，越来越多的网站需要考虑如何兼容这个浏览器。而对于网站中的CSS样式，也需要特别注意Safari浏览器的兼容性。以下是一些CSS写法，可以帮助你解决Safa...

随着Safari浏览器在市场的占有率不断增加，越来越多的网站需要考虑如何兼容这个浏览器。而对于网站中的CSS样式，也需要特别注意Safari浏览器的兼容性。以下是一些CSS写法，可以帮助你解决Safari浏览器兼容性的问题。

/* 设置CSS Reset样式时需要清除浏览器默认样式 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* Safari下设置边框圆角时需要用-webkit-前缀 */
-webkit-border-radius: 5px;

/* 设置透明度时需要同时设置-moz-opacity和-webkit-opacity */
-moz-opacity: 0.5;
-webkit-opacity: 0.5;

/* 在Safari下设置文字阴影 */
-webkit-text-shadow: 1px 1px 1px #333;

/* 在Safari下设置渐变背景 */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#888));

/* 在Safari下设置文字溢出省略号 */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

/* 在Safari下隐藏滚动条 */
overflow: -webkit-hidden-scrollbar;

/* 设置触发硬件加速 */
-webkit-transform: translate3d(0, 0, 0); 

以上CSS写法可以帮助你更好地解决Safari浏览器兼容性的问题。当然，不同版本的Safari浏览器兼容性也有差异，需要根据实际情况进行测试和调试。只有不断探索和实践，才能让网站越来越适应各种不同的浏览器环境。