Question

我有一个使用javascript弹出的div现在在所有浏览器上运行良好...除了在iphone上。在iphone上它没有包装单词，但是将div的宽度从屏幕右侧延伸出来，我无法查看细节。

我在我的Android手机上测试过，一切都很好。我创建了一个jsfiddle，但我认为我不能在那里模仿不同的设备：http://jsfiddle.net/rasweat/xwx6o8ap/

这是我的CSS代码:(我认为这是处理safari，但我猜不是）

.PopupPanel
{
    border: solid 2px black;
    position: fixed;
    background-color:#FFFFFF;
    z-index: 100000;
    border-radius: 10px;
    padding:10px;
    overflow: auto;

    left: 50%;
    top: 50%;

    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Safari */
    transform: translate(-50%, -50%);   

    width: 90%;
    height: 90%;
    box-shadow: 10px 10px 5px #888888;
}

Answer 1

正如@Pangloss指出的那样，不同的部分是 -webkit-transform: translate(50px,100px); 声明，因为所有版本的Safari（包括Safari 8）本身都不支持transform属性，这意味着Safari仅呈现-webkit-transform。

-ms-transform: translate(-50%, -50%); /* IE 9 */

/*Changed the code below this*/
-webkit-transform: translate(-50%, -50%); /* Safari */
/*Changed the code above this*/

transform: translate(-50%, -50%); /* Rest of the world */

最新消息：Firefox，Chrome和Opera（基于Blink）不受影响。

在此处了解详情 - http://caniuse.com/#feat=transforms2d

Div溢出屏幕右侧 - iphone

1 个答案: