使用缩放:0.5;,当不在< a>内时,图像以0.5x大小呈现.标签,但在内部的1x大小< a>标签.
这发生在iOS 8 GM(Xcode 6 GM的iPhone 5模拟器和iPad mini)上.
iOS 7.1.2(iPhone 5)和iOS 7.0(Xcode 6 GM的iPhone 5模拟器)不会出现这种情况.
这是一个例子:https://dl.dropboxusercontent.com/u/379843/ios8csszoom/test.html
<!DOCTYPE html> <html> <body> <img src="star-on@2x.png" style="border: 1px solid blue; zoom: 0.5;"/> <a href="#"> <img src="star-on@2x.png" style="border: 1px solid blue; zoom: 0.5;"/> </a> <hr> <img src="star-on@2x.png" style="border: 1px solid blue; -webkit-transform: scale(0.5);"/> <a href="#"> <img src="star-on@2x.png" style="border: 1px solid blue; -webkit-transform: scale(0.5);"/> </a> </body> </html>
-webkit-transform在iOS 8上运行,但我不想使用它,因为即使图像以0.5x大小呈现,< img>所占用的空间也是如此.标签是1x大小.
任何解决方法?
解决方法
虽然不理想,但这就是我应对这个问题的方法:
>用另一个元素替换锚点(div或span取决于块/内联)
>为每个元素指定一个共享的类名
>保留href,或者使用href添加data-href属性
>在较高的层次上,让事件监听器绑定到具有您的类名的所有元素
>事件侦听器读取href,然后触发适合您的框架的路由/控制器逻辑
示例:http://jsfiddle.net/z5crh05a/
$(".fauxLink").on("click",function(e) { var href = $(e.currentTarget).attr("href"); e.preventDefault(); e.stopPropagation(); // navigation logic here alert("Navigate to: "+href); }); });
希望Safari的问题在未来的iOS更新中得到修复.