IE7 visibility bug

Question

I'm experiencing a visibility: hidden bug in IE7. My CSS is as follows:

.image {
float:left;
width:298px;
visibility:hidden;
*visibility: hidden;
}

Basically I want everything contained within the div to be hidden, but still occupy and reserve the space (so in this case display: none doesn't work). It works in all browsers except IE7, which seems to ignore the visibility line in the CSS.

Answer 1

Try using text-indent

.image {
float:left;
width:298px;

text-indent: -10000px;

}

Demo

Answer 2

Dipaks' answer is pretty much what I'd go for too. A slightly different alternative would be to use left: -10000px; See which works best cross-browser. If you have any problems with either, try adding position: relative; to this and overflow: hidden; to the parent element - I have a hunch (I don't have a copy of IE7 handy to check) that IE might cause the area to increase by 10000px, which will mess up your page widths.

Answer 3

添加可见性：隐藏到图像中： http ： //jsfiddle.net/simply_simpy/n9qZ8/1/

<img class="image" src="http://i.cdn.turner.com/cnn/.e/img/3.0/global/header/hdr-main.gif">​

.image { float:left; width:298px; visibility:hidden; *visibility: hidden; }​