解决图片与标题显示问题-优快云博客

做了一个简单的图片下面带标题。本来想要达到的效果是，如果有图片的话，就把图片显示出来，如果没有图片就显示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显示的是我想要的结果。如下图所示：
[img]http://nanshuiwuyu-gmail-com.iteye.com/upload/picture/pic/32563/161d414f-5db4-3587-8fe4-873ef9016225.gif[/img]
而在火狐狸中，却出现的是下面的形状：
[img]http://nanshuiwuyu-gmail-com.iteye.com/upload/picture/pic/32565/07e70ce0-c5fa-3e30-ad65-5fa18dd05a7c.gif[/img]
后来，加上了下面的语句：


.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>

火狐狸下的图片萎缩