Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/37.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
IE 7中的CSS精灵不工作?_Css_Internet Explorer 7_Css Sprites - Fatal编程技术网

IE 7中的CSS精灵不工作?

IE 7中的CSS精灵不工作?,css,internet-explorer-7,css-sprites,Css,Internet Explorer 7,Css Sprites,我想为每个无序列表实现项目符号样式。我有相应的精灵图像。我实现了它。我从下面的链接中获取了示例。 除了在IE7中,它工作得很好。我也想在IE7中运行相同的教程。我如何实现它 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:/

我想为每个无序列表实现项目符号样式。我有相应的精灵图像。我实现了它。我从下面的链接中获取了示例。



除了在IE7中,它工作得很好。我也想在IE7中运行相同的教程。我如何实现它

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
  <head>

    <title>CSS Sprites for Bullets</title>
<!--[if lt IE 8]>
        <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
    <![endif]-->

    <style>
    div
    {
        width:30%;
        float:left;

    }
    .bullet {
        list-style-type: none;
        margin:0; padding:0;
    }

    .bullet li 
    {
            // padding-top: 5px;  
             padding-left: 20px;
             //margin-bottom: 15px;
             //line-height:1.5em;
             //position: relative;
    }
    .magento li:before 
    {
         display: inline-block;
         position: absolute;
         margin: 9px 0 0 -20px;
         min-height: 9px;  
         background: url(images/bulletsprite.png) no-repeat -116px 0px;
         content:"";
        // vertical-align: middle;
         width: 9px; 
         height: 9px;
         float:left;
    }
           </style>
     </head>
<body>
<div>
    <p>Magenta</p>
    <ul class="magento bullet">
        <li>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam. 
        </li>
        <li>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam. 
        </li>

    </ul>
</div>  
       </body>
       </html>

子弹的CSS精灵
div
{
宽度:30%;
浮动:左;
}
.子弹{
列表样式类型:无;
边距:0;填充:0;
}
李先生
{
//垫面:5px;
左侧填充:20px;
//边缘底部:15px;
//线高:1.5em;
//位置:相对位置;
}
李:以前
{
显示:内联块;
位置:绝对位置;
利润率:9px0-20px;
最小高度:9px;
背景:url(images/bulletsprite.png)不重复-116px 0px;
内容:“;
//垂直对齐:中间对齐;
宽度:9px;
高度:9px;
浮动:左;
}
洋红

  • Lorem ipsum dolor sit amet,是一位杰出的献身者。没有智慧,没有尊严,没有尊严。莫里斯·亨德雷特·廷西顿·努克调味品accumsan。Donec semper hendrerit ligula non blandit。这句话的意思是:“我不知道该怎么说。”。梅塞纳斯·马萨·尼布,射手座的亨德雷特·奥纳雷,中间人坐着埃米特·泰勒斯。在莱克托斯·内克的演讲中,波苏尔在英特杜姆·维塔伊的演讲中,我在酒后驾车。毛里斯·埃吉特·厄罗斯·麦格纳,她是一名孕妇。
  • Lorem ipsum dolor sit amet,是一位杰出的献身者。没有智慧,没有尊严,没有尊严。莫里斯·亨德雷特·廷西顿·努克调味品accumsan。Donec semper hendrerit ligula non blandit。这句话的意思是:“我不知道该怎么说。”。梅塞纳斯·马萨·尼布,射手座的亨德雷特·奥纳雷,中间人坐着埃米特·泰勒斯。在莱克托斯·内克的演讲中,波苏尔在英特杜姆·维塔伊的演讲中,我在酒后驾车。毛里斯·埃吉特·厄罗斯·麦格纳,她是一名孕妇。

IE7不支持
:before
伪选择器,因此这些样式中的大多数都不起作用

请参见
:前
/
:后

您可以使用使
:在
在IE7中工作之前


测试前页:

IE7不支持
:Before
伪选择器,因此这些样式中的大多数都不起作用

请参见
:前
/
:后

您可以使用使
:在
在IE7中工作之前


在测试页面之前:

尝试使用background image:属性而不是background:。您还必须执行背景重复:无重复,并且在背景图像:零件中不包含重复零件。Ie有时很挑剔。请尝试使用background image:属性而不是background:。您还必须执行背景重复:无重复,并且在背景图像:零件中不包含重复零件。Ie有时很挑剔。有没有其他方法可以做到这一点?+1。它只是在IE8中引入的。你不能在IE7中使用这种技术。我的建议是:不要再浪费时间支持IE7了;世界上有四个人仍然使用它作为他们的主浏览器,他们不会在意任何一种方式。@svk-heh。我自己正忙着写一个答案,指着那个剧本。既然你先到了,我就停下来。IE8.js是一个令人印象深刻的脚本,它将解决这里的问题。然而,我坚持我之前的评论,即考虑到目前IE7用户太少,这不值得付出努力。@Zak Angelle即使在我包含上述lin中的js文件后,它也不起作用。有什么想法吗?有没有其他方法来实现这一点?+1。它只是在IE8中引入的。你不能在IE7中使用这种技术。我的建议是:不要再浪费时间支持IE7了;世界上有四个人仍然使用它作为他们的主浏览器,他们不会在意任何一种方式。@svk-heh。我自己正忙着写一个答案,指着那个剧本。既然你先到了,我就停下来。IE8.js是一个令人印象深刻的脚本,它将解决这里的问题。然而,我坚持我之前的评论,即考虑到现在IE7用户太少,这不值得付出努力。@Zak Angelle即使在我包含了上面lin的js文件后,它也不起作用。你知道吗?