IE漏洞修复的图像放置 [英] image placement for IE bug fixes

问题描述

您好，我有一个像这样的菜单:

Hi ive got a menu that is like this:

<li id="selected"><a href="http://www."><p>FAQ'S</p></a></li>

我设法达到了我想要的效果，但后来我在IE 7和phwoooar中对其进行了检查... 一开始我似乎试图阻止宽度修改，但是这似乎是一个宽度问题，但这会影响Firefox:

I've managed to acheive the effect that i wanted in firefox but then i checked it in IE 7 and phwoooar... It seems to be a width issue at the start i try to impeleent a width hack but then this upsets firefox:

#menu li#selected { padding: 0; margin:0; background:url(nav-tab-left.gif) bottom left no-repeat #90288d; height: 35px;  }

#menu #selected a {background:url(nav-tab-right.gif) bottom right no-repeat;height: 25px;}
#menu #selected p { padding: 0 10px; margin:4px; }

ie中的另一个问题是，右侧的图像似乎比左侧的图像高！

the other problem in ie is that the image for the right seems to hang higher than the image on the left blah!

推荐答案

您不能在<a>中包含<p>-块级元素-内联元素.它会在不同的浏览器中不一致地呈现.

You can't have <p> - a block level element - inside <a> - an inline element. It will be inconsistently rendered by the different browsers.

尝试更改为

<li id="selected"><p><a href="http://www.">FAQ'S</a></p></li>

图像问题是因为height属性不适用于嵌入式元素，因此您的height:25px被忽略.使用填充将图像移到适当位置.

The image problem is because the height property does not apply to inline elements so your height:25px is being ignored. Move the image into place with padding.

#menu #selected a 
background:transparent url(nav-tab-right.gif) no-repeat scroll right bottom;
padding-bottom:16px;
}

这篇关于IE漏洞修复的图像放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！