火狐狸下的图片萎缩

    做了一个简单的图片下面带标题。本来想要达到的效果是,如果有图片的话,就把图片显示出来,如果没有图片就显示alt设置的内容。按照这个思路,我写下了下面的代码:
div.imagefont{width:120px;font-size:12px;text-align:center;padding:5px;float:left;border:solid 1px #ccc;}
   img
   {
        width:120px;
        height:75px;
        border:solid 1px #aaccee;
   }
   .font
   {
        width:120px;
        padding-top:5px;
   }

<div class="imagefont">
        <div class="image">
            <a href="">
                <img alt="阳光暖暖" src="" /></a></div>
        <div class="font">
            <a title="阳光暖暖" href="#">阳光暖暖</a>
        </div>
    </div>

然后在浏览器中查看,当没有有图片的情况下,IE6,Safari ,Opera,Chrome显示的是我想要的结果。如下图所示:
火狐狸下的图片萎缩
而在火狐狸中,却出现的是下面的形状:

后来,加上了下面的语句:
.imagefont .image
    {
        width:120px;
        height:75px;
        border:solid 1px #aaccee;
        cursor:pointer;
    }
   img
   {
       width:120px;
       height:75px;
       border:none;
   }

这样在各个浏览器中都是正常显示了。然而,新的问题又出现了,当鼠标悬停时,其他的浏览器鼠标已进入图片边框就变成手形状,而火狐狸下面只有当鼠标移动到阳光暖暖这几个字时才变成手形状。最后只能采取给.image包围框加上了鼠标形状属性解决了这个问题。形式是实现了,可是鼠标变成手形状时点击却没有反应,只能另想办法了。
最后,用CSS hack解决了,其实没有早想到用hack,所以测试了很长的时间,最后才决定用了,以后再给代码减减肥:
<!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>无标题页</title>
    <style type="text/css">
    .imagefont{width:120px;font-size:12px;text-align:center;padding:5px;float:left;border:solid 1px #ccc;}
    .imagefont>#image a
    {
        width:120px;
        height:75px;
     }
    #image>a .image
    {
	    display:block;
	    width:120px;
	    height:75px;
	    border:solid 1px #aaccee;
	    cursor:pointer;
    }
   img
   {
	    width:120px;
	    height:75px;
	    border:none !important;
	    +border:solid 1px #aaccee;
   }
   .font
   {
        width:120px;
        padding-top:5px;
   }
    </style>
</head>
<body>
    <div class="imagefont">
        <div id="image">
            <a href="http://www.baidu.com/"><span class="image">
                <img alt="阳光暖暖" src="" /></span></a></div>
        <div class="font">
            <a title="阳光暖暖" href="http://www.baidu.com/">阳光暖暖</a>
        </div>
    </div>
</body>
</html>

你可能感兴趣的:(浏览器,css,chrome,Gmail,Safari)