随着苹果系统的普及,越来越多的网站需要进行苹果系统的css样式兼容性处理。苹果系统的浏览器Safari和iOS中的Safari都是基于WebKit内核开发的,与其他浏览器在渲染页面上存在一些差别。下面我们来看一些常见的问题以及解决方案。
1. Border-radius
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
在Safari浏览器中使用-webkit-border-radius属性,而在Firefox等浏览器中使用-moz-border-radius属性。当然,为了兼容所有的浏览器,最好还是再加上标准的border-radius属性
2. Box-shadow
-webkit-box-shadow: 2px 2px 10px #ccc; -moz-box-shadow: 2px 2px 10px #ccc; box-shadow: 2px 2px 10px #ccc;
同样的,box-shadow属性在不同的浏览器中是不同的。在Safari浏览器中使用-webkit-box-shadow属性,在Firefox浏览器中使用-moz-box-shadow属性,标准属性可以不加。
3. Transparent
background-color: rgba(255, 255, 255, 0.5);
透明度在Safari浏览器中使用rgba属性,而在Internet Explorer和Firefox中使用filter:alpha(opacity=50)和opacity:0.5。使用rgba属性可以做到透明度效果并兼容Safari浏览器。
4. 文本垂直居中
.container { display: table-cell; vertical-align: middle; } .container span { outline: none; }
在处理文本垂直居中的时候,可以使用display:table-cell和vertical-align属性实现这个效果。当然,如果这里使用了outline属性,需要将它的值设置为none,否则在Safari浏览器中会有一些奇怪的边框出现。
总之,在进行苹果系统的样式兼容性处理时,需要多花些时间来处理不同浏览器之间的差异,但是这是为了更好的用户体验而必要的。