火狐狸下的图片萎缩

阳光暖暖

浏览: 13271 次
性别:
来自: 青岛

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

吾爱CSS

CSS Chrome Gmail 浏览器 Safari

做了一个简单的图片下面带标题。本来想要达到的效果是，如果有图片的话，就把图片显示出来，如果没有图片就显示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>

2
顶

0
踩

分享到：

常用html标签的英语全称及简单功能描述 | PNG格式的图片在IE6下透明显示

2009-03-05 19:06
浏览 974
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

火狐狸下的图片萎缩

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

火狐狸下的图片萎缩

评论

发表评论

相关推荐

给搜索框添加漂亮的背景

PNG格式的图片在IE6下透明显示

最近访客更多访客>>