在iOS 8 Mobile Safari中,CSS缩放不适用于in

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

在iOS 8 Mobile Safari中,CSS缩放不适用于in

解决方法

相关文章