0

我有固定位置菜单项的背景图像。它们在桌面浏览器上看起来是正确的，但是在移动浏览器上显示时它们会被拉伸并且只显示图像的中心部分，并且图像看起来大约是原始大小的 4 倍。

我尝试设置 background-size:cover cover !important; 强制大小填充容器，但这也没有效果。

我知道在移动设备上使用固定定位和视口存在问题，但我尝试将元素设置为相对定位但没有任何效果。

HTML：头：

<meta name="viewport" content="user-scalable=no, initial-scale=1.0" />

菜单：

<ul id="shortcuts" role="complementary" class="children-tooltip tooltip-right lulus">
<li class="current"><a href="/Home" class="shortcut-dashboard" title="Home">Home</a></li>
<li><a href="/Calendar" class="shortcut-agenda" title="Events">Events</a></li>
</ul>

CSS：

#shortcuts {
display: none;
position: fixed;
z-index: 998;
top: 44px;
left: 10px;
margin: 0;
width: 240px;
list-style-type: none;
padding: 15px 4px 5px 14px;
*padding-bottom: 25px;
border: 1px solid white;
background: #d9d9d9 url(../img/old-browsers/style/bg_shortcuts.png) repeat-x;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(#d9d9d9));
background: -webkit-linear-gradient( white, #d9d9d9 );
background: -moz-linear-gradient( white, #d9d9d9 );
background: -ms-linear-gradient( white, #d9d9d9 );
background: -o-linear-gradient( white, #d9d9d9 );
background: linear-gradient( white, #d9d9d9 );
-webkit-background-clip: padding-box;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
}
#shortcuts > li {
    width: 70px;
    height: 70px;
    float: left;
    margin: -5px 10px 25px 0;
    }
.shortcut-dashboard { margin-left:0px !important; /*padding-bottom:65px; width:70px !important;*/ background-image: url(../img/standard/icons/Home_Icon.png) !important; background-position:center center !important; background-size:cover cover !important; }
.shortcut-agenda { margin-left:0px !important; /*padding-bottom:65px; width:70px !important;*/ background-image: url(../img/standard/icons/Calendar_Icon.png) !important; background-position:center center !important; }

我无法弄清楚为什么背景图像会被拉伸并且仅在移动浏览器上。这是我的背景图像表现不佳的唯一地方。任何帮助都会很好......我不反对对这些行为不端的孩子进行体罚！

4

2 回答 2

0

伙计们，我对这个不好。我有一个 CSS 文件，它将背景大小覆盖为预定的像素大小。我从 CSS 文件中删除了这个属性，一切都很好。

顺便说一句，有没有人知道任何允许我从移动浏览器查看页面 CSS 的应用程序或插件？类似于内置桌面浏览器的开发人员工具栏的东西？这会省去我很多头疼的...

于 2013-08-21T20:32:05.357 回答
0

引用“HTML/XHTML 第 6 版权威指南”：

告诉浏览器您的文档包含用于打印和计算机显示的 CSS。指定媒体时要小心，因为除非文档在您指定的媒体之一上呈现，否则浏览器无法应用您定义的样式。因此，例如，如果用户使用手持计算机连接到 Web，则浏览器不会应用我们为 media="screen,print" 设计的示例样式集。如何在不创建文档的多个副本的情况下为不同的媒体创建不同的样式定义？CSS2 标准允许您通过它对@import 规则的扩展和@media 规则来定义特定于媒体的样式表，我们将在本章后面的第 8.1.5 节中进行描述。” 指定媒体时要小心，因为除非文档在您指定的媒体之一上呈现，否则浏览器无法应用您定义的样式。因此，例如，如果用户使用手持计算机连接到 Web，则浏览器不会应用我们为 media="screen,print" 设计的示例样式集。如何在不创建文档的多个副本的情况下为不同的媒体创建不同的样式定义？CSS2 标准允许您通过它对@import 规则的扩展和@media 规则来定义特定于媒体的样式表，我们将在本章后面的第 8.1.5 节中进行描述。” 指定媒体时要小心，因为除非文档在您指定的媒体之一上呈现，否则浏览器无法应用您定义的样式。因此，例如，如果用户使用手持计算机连接到 Web，则浏览器不会应用我们为 media="screen,print" 设计的示例样式集。如何在不创建文档的多个副本的情况下为不同的媒体创建不同的样式定义？CSS2 标准允许您通过它对@import 规则的扩展和@media 规则来定义特定于媒体的样式表，我们将在本章后面的第 8.1.5 节中进行描述。” 例如，如果用户使用手持计算机连接到 Web，浏览器将不会应用我们为 media="screen,print" 设计的示例样式集。如何在不创建文档的多个副本的情况下为不同的媒体创建不同的样式定义？CSS2 标准允许您通过它对@import 规则的扩展和@media 规则来定义特定于媒体的样式表，我们将在本章后面的第 8.1.5 节中进行描述。” 例如，如果用户使用手持计算机连接到 Web，浏览器将不会应用我们为 media="screen,print" 设计的示例样式集。如何在不创建文档的多个副本的情况下为不同的媒体创建不同的样式定义？CSS2 标准允许您通过它对@import 规则的扩展和@media 规则来定义特定于媒体的样式表，我们将在本章后面的第 8.1.5 节中进行描述。”

PS，尽量让你的代码更相关：而不是使用'px'，以百分比指定值。

于 2013-08-21T18:08:37.483 回答