我不知道为什么我设置的“背景图像”在所有浏览器中都能正常工作,但在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/

09-27 03:48