我不知道为什么我设置的“背景图像”在所有浏览器中都能正常工作,但在iphone的safari浏览器中却不行(wich才是我需要的)。
这是这个问题的相关文体
/**************************************************
ESTILOS PARA SINGLE JOB
**************************************************/
/*Deleting all styles that dont take any effect with the question*/
#panel.right ul.visible li a span.liLeft{
width:95px;
float:left;height:100%;display:block;
position:relative;
right:40px;
/*HERE I INIT THE STYLE OF THE BACKGROUND IMAGE BUT I DONT SET THE URL*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:10;
}
#panel.right ul.visible li a span.liRight{
background:black !important;
color:#fff;
}
#panel.right ul.visible li a span.liRight{
z-index:9;
}
#panel.right ul.visible li#blue a{
border-color:#0C7CC3;
}
#panel.right ul.visible li#pink a{
border-color:#C21B7B;
}
#panel.right ul.visible li#orange a{
border-color:#E83B35;
}
/* HERE i set the urls for the different Id's and i can't see them in the iphone */
#panel.right ul.visible li#blue a span.liLeft{
background-image:url('http://piscolabis.info/licht/img/azul.png');
}
#panel.right ul.visible li#pink a span.liLeft{
background-image:url(../img/rosa.png);
}
#panel.right ul.visible li#orange a span.liLeft{
background-image:url(../img/naranja.png);
}
/* deleting more styles*/
您可以在http://jsfiddle.net/6dK3T/2/或http://piscolabis.info/job_single.html查看在线代码。
如您所见,我设置了一个完整的路径url,这样您就可以看到图像在服务器(和任何桌面浏览器)中,但我不知道为什么图像仍然没有显示在iphone中
(它的显示与其他两个完全相同,我没有设置绝对路径(因为它们不在jsdfidle中,所以它们不工作)
是因为背景图像吗?是因为位置:相对?
知道为什么会这样吗?
-编辑-
应该是这样的
这不是一个迷雾吗?
最佳答案
我通过稍微调整你的风格让它在我的iphone上显示出来:
#panel.right ul.visible li a span.liLeft{
width:95px;
float:left;
height:100%;
display:block;
position:relative;
margin-left: -40px;
margin-right: 40px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:10;
}
#panel.right ul.visible li a span.liRight {
background:black !important;
float: left;
color:#fff;
}
OSX上的Safari也有同样的问题。通过移除
right: 40px;
在css中,图像开始显示。
http://jsfiddle.net/5sX54/9/