Question

我的手机菜单有以下css规则，但问题是它忽略了我的移动设备上的postion语句，而不是我的桌面浏览器（Chrome，Firefox IE等）

CSS规则：

background:#000 url("images/nav-icon.png") no-repeat;background-position:
right 15px top 10px; (DISPLAYED AT THE TOP LEFT *)

让alos尝试过这些组合。

background-image:url("images/nav-icon.png");background-repeat:no-repeat;
background-position:right 15px top 10px; (DISPLAYED AT THE TOP LEFT *)

background:#000 url("images/nav-icon.png") right 15px top 10px no-repeat;
(NOT DISPLAYED AT ALL *)

* 在移动设备上。

其中一个根本没有显示，但其中两个位于左上角。看看上面哪一个。

现在我的问题是，我的组合有问题，还是移动设备不支持这些组合？

谢谢杰克

Answer 1

有些移动设备无法做到这一点。即iPhone或Webkit浏览器。

尝试找到另一种方式（如果你谷歌它们有很多css hacks）或使用javascript！

确保在多台设备上测试您的网站。我去Future Shop或Bestbuy，将在平板电脑，大屏幕电脑和一系列移动设备上测试我的响应式网站/网络应用程序。

Answer 2

您是否必须使用四值语法指定背景位置？那还是open proposal。如果您知道要应用它的元素的宽度，可以使用百分比值从右侧设置它。

也许最好的解决方案是在div元素中创建span元素，并定位span元素而不是background-image

如果你要将背景应用于跨度，你需要给它一个display: block;或类似的，所以你不妨在这种情况下使用div并且绝对用z来定位它 - 索引低于你想要它的元素（你需要给它们position: relative;以使z-index工作。

移动设备忽略了我的css规则，为什么？

2 个答案: