CSS left: -50% causing IE7 to ignore width_问答_开发者

CSS left: -50% causing IE7 to ignore width

开发者 https://www.devze.com 2023-03-21 09:29 出处：网络

A fully working example is availiable here on jsFiddle. I strongly encourage you to look here as the CSS is kind of large, and I didn\'t want to paste it here (making my question hard to read).

A fully working example is availiable here on jsFiddle. I strongly encourage you to look here as the CSS is kind of large, and I didn't want to paste it here (making my question hard to read).

I have a horizontally centered tabstrip on my site, the idea is the UL/LI items are centered on the page and I have a solution that up until very recently (looked) like it worked on all browser configurations.

The html for this is actually quite simple:

<div id="tabContainer">
    <ul>
        <li style="width: 190px;"><span><a href="#">Tab One with more text</a></span></li>
        <li style="width: 190px;"><span><a href="#">Tab Two</a></span></li>
        <li style="width: 190px;"><span><a href="#">Tab Three is wide</a></span></li>
    </ul>
</div>

Each <li> is a tab, it's got left padding for the left rounded tab stuff.
Each <span> has right padding for the right rounded tab stuff.
Finally the <a> generally fills up the remainder making for a large click target.
Each Item is manually styled with a width: 190px which keeps thier widths uniform (for a nice visual look, this is customized by the site code so it's in a style vs a class.

The CSS:

The CSS works off a simple concept, the <ul> is shifted 50% right, and the <li> is shifted 50% left (left: -50%;) to put them always in the center of the master container.
The tabs overlap a bit using negative margin & z-index so the corner pieces criss-cross (done in the background image which isn't important here)

The Problem

IE7 decides that it's not going to listen to the explicit style="width: 190px", even if !important is added to it. However, this only seems to happen when left: -50% is present on the <li> item. If that style is removed the tabs shift to the right (wrong location, but correct fixed width).

To me, this seems like it's unrelated as there's nothing the left: -50% would cause the items to collide with forcing them to go to thier minimum width.

This setup works correctly and is tested in:开发者_开发知识库