IE7 is clipping my text. How do I adjust its attit

问题:

A few days ago I re-skinned my website. Development of this skin was primarily done using safari, and as expected, it all renders fine using firefox and opera. I've had to make a few small tweaks for IE7, but nothing much, except for one problem...

The date indicators for a post are cut off in IE. This problem seems to occur only on nested span tags inside a left floating div. I think I need the floating div's in order to layout text on the left and the right side of the screen.

Do any of you know how to stop IE7 from clipping my text?

Edit: I have sort of given up on this problem. My scripts now check for IE7 and feed it somewhat simplified HTML that its limited engine can handle. It works in IE8, so, for now, just the special case for IE7 will have to do...

回答1:

In most cases where IE6 or 7 clips off the bottom of text, just add:

line-height: normal;

to the CSS rules concerned. Should fix it nicely, but as you'll understand, it expands the box too.

回答2:

There's a hack I figured out that fixes the problem of cutting off text in IE. I noticed the last line in my headline was the only one being cut off.

My original CSS which was cutting off the last line in IE7 but looked fine in other browsers:

h2 {
   font-size: 22px;
   line-height: 1em;
}

See image of problem here: https://skitch.com/pablohart/f4g3i/windows-7-x64

The fix I did included simply adding padding to the bottom and then taking that padding back with negative margin. Like this:

h2 {
   font-size: 22px;
   line-height: 1em;
   padding-bottom: 5px;
   margin-bottom: -5px;
}

See picture of fix in this image: https://skitch.com/pablohart/f4g4h/windows-7-x64

The problem with line-height: normal; is that it takes on the default line-height for the font, usually 1.3em.

回答3:

Try adding overflow: visible; to your .postdate class. Maybe that helps.

回答4:

I had a similar problem. I changed my span to a div and the problem was resolved. I think IE7 might have an issue processing line-height on a span. Haven't confirmed that to be the issue. There were other CSS elements. (Working on someone else's code.) But changing from span to div (block) resolved the issue.

回答5:

for the .bigdate class, try replacing margin with padding; seems to me that this has something to do with IE's margin-handling.

回答6:

Adding a specific height to .title fixes it for me (in IE6):

.title {
    PADDING: 0 10px 0 0; MARGIN-top: 0.3em; FLOAT: right; height: 1em;

回答7:

Despite being unable to test it on my current machine: I would suspect that it's a hasLayout bug. The methods of dealing with it are listed in the "properties" section of that link.

回答8:

In my experience its invariably the bottom of the text that gets clipped and that too basically because of the overlapping divisions. If you are able to ensure that the divs don't overlap then the issue does get resolved . That apart adding overflow: visible does help at times.

回答9:

Try adding

div.postmeta { height: 100px; }
div.postdate { height: 75px; }

Arbitrary height value... but you'd know the exact height you want. That should keep the text containers from clipping in IE7.

回答10:

I think the problem is with the padding. I tried removing a "padding: 3px" style and it worked properly. Previously it was not showing anything. Paul Hart's answer showed me that.
Probably also removing/overriding margin properties may also help.