开发者

Color "transparent" not working

I have a problem with the IE (what else?):

I generate content with CSS which has also a background-image. I looks like that:

#nav ul li:after {
    content: "--";
    position: relative;
    z-index: 99;
    background: transparent url(image.png);
    color: transparent;
}

The text color is in non-IE-browsers transparent, but in all IE browsers (IE6-IE8) it's black and you could see it. How could I make the text transparent/unvisible?

I tried already: visibility - opacity - filter - text-indent ... But none did his job right, either it disappears (with it backgro开发者_如何学JAVAund which I need) or the attribute doesn't apply.


if what you're trying to do is show the image as background and not showing the text use

font-size:0px

it works!


what about using line-height

line-height:0;

it worked in my case.


I get it: With the correct padding and a zero font-size! Set the padding-left value to be one pixel beyond the image width.


If this doesn't work in Internet Explorer 8

font-size: 0;

make sure you're using a valid doctype:

<!DOCTYPE html>


This should work. If it doesn't add display: block or inline-block

.transparent {
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
}


I think no versions of IE support color: transparent Perhaps you could try to do it with jQuery or something like that.


I assume you already fixed this, but lately i've used a very large line-height, when text-indent is giving me layout problems, combined with overflow: hidden to hide the text.


IE doesn't support li:after consistently. Which IE are you talking about? IE6? IE7? Both?


For me color:transparent was not working in IE8, and it was showing text with default color. I used visibility:hidden; for IE8 only as the text was not required to display.

Hope this help in case, if the element is not required to display.


I see you're using a PNG as your background image. Normally, if you're using IE 6, there is a fix for PNG transparency (http://www.twinhelix.com/css/iepngfix/). Even so, this will not work with background-images. So if you're using IE 6, there really isn't a fix.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜