Question

CSS给图片加边框火狐不支持的问题

CSS里定义的代码为 img {border:1px solid #cacaca; padding:3px;}
在火狐中边框不紧贴图片 而是一个竖条型的框，其他浏览器都是与图片间隔3像素紧贴图片，怎么才能在火狐中正常显示呢？求高手解答。
弄好了 火狐是显示正常了，但其他浏览器没有3像素的间隔了，这怎么回事呢。

Answer 1

可能是CSS样式有冲突吧。可以用不同浏览器CSS的hack解决。我估计是你CSS不太熟练，可能写的一些地方不规范造成的。

浏览器在遍历CSS时，后写的样式会替换掉先写的CSS样式
比如如果你的CSS文件中同时存在下面两条
<style type="text/css">
img{padding:0px;}
img{padding:2px;}/*浏览器遍历img的padding:2px优先级高于上面的padding:0px*/
</style>

浏览器在遍历CSS时，指定的元素样式会覆盖未指定元素样式
比如：
<style type="text/css">
.img-css img{padding:0px;}/*指定样式名称img-css下的img元素padding:0px样式优先级高于下面的padding:2px*/
img{padding:2px;}
</style>

img {border:1px solid #cacaca; padding:3px;}
这么写就是页面所有img元素都会遍历该样式。
不过一般网站CSS很少有这么写的，当然我不知道你的页面要做成什么样子。
建议你不要这么写。
你可以在CSS最前面写上img{margin:0px;padding:0px;}之类的笼统遍历样式。

当你碰到页面某些img需要用到指定样式时，再指定的去写样式。

例如
<div class="img-css"><img src="demo.jpg" /></div>
那么你的CSS就可以写上
.img-css img{border:1px solid #cacaca; padding:3px;}

书写规范可以让你减少一些不必要的麻烦。

多写写多练练多思考多实践，碰到问题就百度谷歌一下，总会有好办法的。

Answer 2

　　尊敬的用户，您好！很高兴为您答疑。
　　鉴于您的描述，您是将border直接附加在img的style下，其实如果要实现这样的效果，最佳的效果是先使用div包裹图片，然后为div添加边框效果以实现您所期望的效果。
　　希望我的回答对您有所帮助，如有疑问，欢迎继续咨询我们。

Answer 3

我测试了下你的代码，完全正常，怀疑是其他代码干扰了你关于img的定位。

你可以下一个叫firebug的火狐插件，然后在图片上右键，点查看元素就可以看到此元素对应的HTML及CSS代码，一下子就找到问题了。

Answer 4

设置图片长宽。。

Answer 5

怀疑是代码有些地方不合理，导致冲突没有效果，904850964是我的QQ号，我帮你看一下