使用缩放：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更新中得到修复.
