用caption属性给图片加描述边框

发布于：电脑网络, 精品推荐 539 次践踏

为了节省流量和空间，我把图片都外链到Skydrive上了，所以在日志中插入图片经常要用到“从URL添加媒体文件”这一项。奇怪的是，每次在Wordpress编辑器中用了caption属性的图片都可以完好地显示描述边框，但是发布后无论在Firefox还是在IE各版本下的浏览器都没有这个效果了。这么炫的效果没能实现很可惜，但我一直没有去仔细研究原因。

今天路过别家博客的时候无意中发现别人居然能使用这一效果，我心理一下子就不平衡了，决心也要把这描述边框整出来！在这一点上，Firefox给我们带来了无比的便利，我“偷窥”了一下该站的CSS代码和自己的CSS比较了一下，原来我的主题style.css中没有配备caption的样式，难怪不能实现图片的描述边框了，如此简单的道理却困扰了我这么久。

既然已经“偷窥”了，就索性“偷”个彻底，我把他家的style.css中的caption属性都整理出来安在自家的style.css上了。果然，完美地实现了给日志图片加描述边框的效果，在Firefox下还有个微微的圆角，很不错，自己赞一个。之后我又找到在Wordpress的官方网站上也有这段代码的介绍，喜欢这个效果的朋友直接把下面的代码复制到style.css中就可以了，你也可以根据需要稍加修改。

.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
   float: left;
}

.alignright {
   float: right;
}

.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}

最后，展示一下使用caption属性给图片加描述边框前后的效果对比。

不使用caption属性，没有边框，alt描述不可见：

Life Studio-Logo

使用caption属性，有边框，alt描述可见：

Life Studio-Logo

Life Studio-Logo