Question

我的代码在Google Chrome中运行良好但在Firefox和IE中无效。

<asp:Image ID="Image1" runat="server" CssClass="image" />

Css代码：

.image{
 width:50px;
 height:50px; 
 content:url('Image.png'); 
}
.image:hover{
 width:50px;
 height:50px; 
 content:url('Image_Hover.png'); 
}

Answer 1

SO上的不同人正在解决同样的问题。一种解决方案是将content (...)更改为background-image。在您的情况下，它将是：background-image: url('Image.png');（或悬停图片）

检查this post以获取更多详细信息。 Stuart Kershaw在其中一条评论中对此行为作了解释：

我不知道它在Chrome中的工作原理，但对此的解释是您不能将内容属性与：hover选择器一起使用。 content适用于：before /：after伪元素。 -

编辑：代码的完整示例，根据链接帖子中的信息进行更改：

 .image {
    height: 50px;
    width: 50px;
    display: block;
    background-image: url('Image.png');
}

.image:hover {
    background-image: url('Image_Hover.png');
}

编辑2：如果两个图像的大小相同，并且每次使用CSS缩小尺寸，每次都会缩小到50x50，那么您可以将图像尺寸缩放到50x50并使用较小的图像，这样就不会影响图像尺寸。每次使用CSS都必须这样做。我更喜欢使用GIMP，但我敢打赌，有许多免费的在线工具，可以将图像调整到所需的大小。

Answer 2

CSS：

Error in data.frame(..., check.names = FALSE) : 
  arguments imply differing number of rows: 16, 15
In addition: Warning message:
In rep(names(V_ID), each = lengths(V_ID)) :
  first element used of 'each' argument

HTML：

.my-img{
          width:100px;
          height:100px;
          background-image: url('Image.png');
        }
     .my-img:hover {
            background-image: url('Image_Hover.png');
        }

试试这个。

Answer 3

您还没有指定图像的任何浮动位置。试试float:left它会起作用

图像大小不适用于Mozilla和IE

3 个答案: