Why Doesn't IE7 recognize my css padding style

问题:

My site is working fine in Firefox, Safari, Chrome, and Opera, but for some reason IE7 is not recognizing css padding on any anchor tags. I can't figure this out. In IE7, if you look at the tabs that say "exclusives|popular|recent comments" on the homepage http://revolvermag.com, you'll see that there is no padding getting applied.

I've worked around the padding not getting applied to anchor tags elsewhere on the site, but here it looks especially bad. Anyone know of CSS fixes for this?

回答1:

a { display: inline-block } might work while keeping the inline-level meaning it doesn't break the page. Can't try though, I don't have IE7. In IE8 inline it works fine.

回答2:

You can't have padding on non block elements. If you give them a little CSS love:

a { display: block; }

Then they'll respect padding.

回答3:

Add display block to your a so it has a height

.tabNavigation li a {
   display:block
}

and then you need to move the tabs back up 7px so they sit on the line.

.tabs .tabNavigation {
   float:left;
   list-style:none outside none;
   margin:-31px 0 0 -1px;
}