2013-01-03 56 views
-1

我有一个有趣的问题,我一直在试图解决过去几天。我创建了一个第二导航菜单,并通过将此代码添加到我的custom_functions.php它添加到论文1.8.5边栏:Wordpress导航菜单图像没有显示在移动Safari中

/* Add second menu to sidebar 1*/ 
register_nav_menu('secondary', 'Secondary Menu'); 
function secondary_menu() { 
wp_nav_menu(array('container_class' => 'secondary_menu', 'theme_location' => 'secondary'  )); 
} 
add_action('thesis_hook_before_sidebar_1','secondary_menu'); 

然后我加入这个CSS来custom.css创建菜单项的图标:

/* Menu Container */ 
.custom .sidebar .menu { 
    list-style: none; 
    padding: 0; 
    margin: 0 0 0 10px; 
    width: 190px; 
    height: 190px; 
    position: relative; 
} 

/* Submenu Container */ 
.custom .sidebar .sub-menu { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    width: 190px; 
    height: 45px; 
    position: relative; 
} 
/* Facebook */ 
.custom #menu-item-15470 a { 
    display:block; 
    height:81px; 
    width:80px; 
    padding:0px; 
    margin-left:0px; 
    position: relative; 
    left: 0px; 
    top: 0px; 
    outline:none; 
    text-indent:-9999px; 
    background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0 0px; 
} 
.custom #menu-item-15470 a:hover { 
    background-position:-83px 0; 
} 

/* Pinterest */ 
.custom #menu-item-15471 a { 
    display:block; 
    height:81px; 
width:80px; 
padding:0px; 
margin-left:0px; 
position: relative; 
left: 91px; 
top: -81px; 
outline:none; 
text-indent:-9999px; 
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -82px; 
} 
.custom #menu-item-15471 a:hover { 
background-position:-83px -82px; 
} 

/* Instagram */ 
.custom #menu-item-15472 a { 
display:block; 
height:81px; 
width:80px; 
padding:0px; 
margin-left:0px; 
position: relative; 
left: 0px; 
top: -71px; 
outline:none; 
text-indent:-9999px; 
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -165px; 
} 
.custom #menu-item-15472 a:hover { 
background-position:-83px -165px; 
} 

/* Instagram Submenu Janae */ 
.custom #menu-item-15473 a { 
display:block; 
height:42px; 
width:80px; 
padding:0px; 
margin-left:0px; 
position: relative; 
left: 1px; 
top: -72px; 
outline:none; 
text-indent:-9999px; 
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -331px; 
} 
.custom #menu-item-15473 a:hover { 
position: relative; 
left: 1px; 
top: -72px; 
background-position:-83px -331px; 
} 

/* Instagram Submenu Billy */ 
.custom #menu-item-15478 a { 
display:block; 
height:42px; 
width:80px; 
padding:0px; 
margin-left:0px; 
position: relative; 
left: 1px; 
top: -75px; 
outline:none; 
text-indent:-9999px; 
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -374px; 
} 
.custom #menu-item-15478 a:hover { 
background-position:-83px -374px; 
} 

/* Twitter */ 
.custom #menu-item-15475 a { 
display:block; 
height:81px; 
width:80px; 
padding:0px; 
margin-left:0px; 
position: relative; 
left: 91px; 
top: -197px; 
outline:none; 
text-indent:-9999px; 
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -248px; 
} 
.custom #menu-item-15475 a:hover { 
background-position:-83px -248px; 
} 

/* Twitter Submenu Janae*/ 
.custom #menu-item-15476 a { 
display:block; 
height:42px; 
width:80px; 
padding:0px; 
margin-left:0px; 
position: relative; 
left: 92px; 
top: -198px; 
outline:none; 
text-indent:-9999px; 
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -417px; 
} 
.custom #menu-item-15476 a:hover { 
background-position:-83px -417px; 
} 

/* Twitter Submenu Billy*/ 
.custom #menu-item-15479 a { 
display:block; 
height:42px; 
width:80px; 
padding:0px; 
margin-left:0px; 
position: relative; 
left: 92px; 
top: -201px; 
outline:none; 
text-indent:-9999px; 
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -460px; 
} 
.custom #menu-item-15479 a:hover { 
background-position:-83px -460px; 
} 

菜单图标在所有浏览器(包括手机浏览器)上都正确显示,但不在移动Safari(仅显示链接)中显示。

它应该如何看:

http://farm9.staticflickr.com/8220/8340444170_7db7385bab_b.jpg

它看起来像什么在移动Safari浏览器:

http://farm9.staticflickr.com/8072/8339388111_7bdc6f50a9_b.jpg

我的工作博客是www.hungryrunnergirl.com如果你想自己检查一下。

任何帮助,将不胜感激。谢谢

+0

它似乎工作正常。我认为你已经解决了吗? – Nick

+0

不,在我的iPhone和iPad上查看时,它仍然给我提供文本链接而不是图像。你从哪个设备查看? – melbill

+0

我正在使用iOS模拟器(官方Apple工具)。我尝试了iPhone和iPad。您遇到缓存问题吗? – Nick

回答

0

它似乎工作正常。我正在使用iOS模拟器(官方Apple工具)。我尝试了iPhone和iPad。您遇到缓存问题吗?

+0

custom.css的缓存确实是问题。谢谢你的帮助。 – melbill