在iOS 8 Mobile Safari中,CSS缩放不适用于<a>中的<img>

Question

在iOS 8 Mobile Safari中,CSS缩放不适用于<a>中的<img>

Ken*_*nji 6 css mobile zoom mobile-safari ios8

使用时zoom: 0.5;,图像在不在<a>标记内部时以0.5x大小呈现,但在<a>标记内部时以1x大小呈现.

这发生在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>

Run Code Online (Sandbox Code Playgroud)

-webkit-transform在iOS 8上运行,但我不想使用它,因为即使图像以0.5x大小呈现,<img>标签消耗的空间也是1x大小.

任何解决方法？

Answer 1

小智 3

虽然不理想，但这就是我处理问题的方法：

用另一个元素替换锚点（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);

    });

});

Run Code Online (Sandbox Code Playgroud)

希望 Safari 中的问题能够在未来的 iOS 更新中得到解决。

归档时间：	11 年，3 月前
查看次数：	5526 次
最近记录：	11 年前