Question

css 标题文字前面加小图标，如何使它们不错位？

我现在标题文字全部使用的<h3>
----------------------------------------------------------------
h3的样式为：font-size: 14px; font-weight: bold; text-align: left; margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0;
----------------------------------------------------------------
放置<h3>的div是menubar样式为：height: 30px; padding-left: 10px; line-height: 30px;
----------------------------------------------------------------
然后我在标题的前面需要插一个小图片。可是一插进去发生错位了。
我的代码是
<div class="menubar">
<h3><img scr="123.jpg" /><a hrer="#">菜单标题</a></h3>
</div>

我本来在之前没有加img的时候文字显示是正常居中。
插了图片之后。在FIREFOX却还是正常显示的。。
但是在IE里面浏览就发现文字跟图片都不居中了。顶上了。都顶上了。我设置的lineheight:30px完全不管用了。我郁闷。

这是啥问题呢？- -。。要怎么解决呢？我不想用margin或者padding。。觉得很麻烦。
不知道这是啥道理呀。
-
--------------------------------------------------------------------------------------
-
不行呀。把图片当成H3的背景是好的。可是我这个h3要用到很多地方。而且不一定都加这个小图标的。现在我的这类菜单统统使用h3。。可是前面的小图片就不固定了呀。T_T

还有一个问题就是很奇怪。。这个图片绝对居中。偶有的时候用有效。。有的时候用就没效了。。 - -
现在这个图片居中我也用了。。完全没用。。居然还错位到h3的下面去了。>_<

为什么在IE浏览器看到的设的lineheight文字高度都会偏上呢。。在火狐又很正常啊。。- -
-
--------------------------------------------------------------------------------------

Answer 1

两种方法：
一、把小图片当做h3的背景来调即：
.menubar h3{font-size: 14px; font-weight: bold; text-align: left; margin:0;background:url(123.jpg) no-repeat left center;padding-left:图片的宽度;}；
二、加上<img scr="123.jpg" align="absmiddle" />使图片绝对居中；
推荐第一种情况，如果别的地方还有要使用这个图片的话；

Answer 2

解决办法，就是把图片的位置和标题的位置放在一个样式控制。
示例代码如下：
<div class="menubar">
<h3 class="h3"><a hrer="#" class="one">菜单标题</a></h3>
</div>

.h3{background:url(123.jpg) no-repeat 4px 6px;line-height:25px;font-size: 14px; margin:0; }

Answer 3

把图片当成h3的背景，给h3加个适当的padding,让小图片能显示出来，然后用背景定位控制吧，这样好弄些。

Answer 4

设为auto .还有两种方法：
一、把小图片当做h3的背景来调即：
.menubar h3{font-size: 14px; font-weight: bold; text-align: left; margin:0;background:url(123.jpg) no-repeat left center;padding-left:图片的宽度;}；
二、加上<img scr="123.jpg" align="absmiddle" />使图片绝对居中；
推荐第一种情况，如果别的地方还有要使用这个图片的话

Answer 5

有没有代码，这个错位的原因太多了。。。div高度啊，或者div行不兼容（我自己起的名字。。。）