浮动DIV中具有左右边距的IE7间距问题

Question

I wanna create some columns with width and margins in percentage in DIVs can fit, inside any container with dynamic width.

example

<div class="gridFluid">
    <div class="col-1-4"></div>
    <div class="col-1-4"></div>
    <div class="col-1-4"></div>
    <div class="col-1-4"></div>
</div>

---

 * {
     margin: 0;
     padding: 0;
 }
 body {
     font-size: 1%
 }
 .gridFluid {
     width: 960px;
     display: table;
     background: #eee;
     font-size: 0px;
     overflow: auto;
     zoom: 1;
 }
 .col-1-4 {
     background: #ddd;
     height: 200px;
     width: 23%;
     display: table-cell;
     *display: inline;
     zoom:1;
     margin-left: 1%;
     margin-right: 1%;
     float: left;
 }

It's working as expected everywhere, but in IE7 last column is not able to fit properly in single line. May be because it's adding extra space between DIVs other then margin.

I don't want to use different width or margin for IE7 (width: 24.5% instead 25). Because it's not a proper solution. I'm looking for a good solution for it.

May be it's Known issue of IE7, I find lot of issue related to it when i'm searching for solution but not get any proper way to solve my problem.

Answer 1

Let's do some quick calculations based off of your CSS.

You want each column to be 23% of the width of the container. So each column should be:

.23 * 960 = 220.8

So each column should be 220.8 pixels.

You want the margins to each be 1% wide.

.01 * 960 = 9.6

So each margin should be 9.6 pixels wide.

Wait a minute. We've got some partial pixels in there. How do you handle a .8 or a .6 of a pixel? Well you have to do some rounding. But which way do you round... up or down? Well if you round up you end up with 4 columns sized 221 pixels.

221 * 4 = 884

So the total width of the columns is an estimated 884 pixels.

What about the margins?

8 * 10 = 80

So the total width of the margins is an estimated 80 pixels.

Now let's add those numbers together.

80 + 884 = 964

Hrmm... looks like we've got 4 extra pixels here... better push the content down a line to fit in the 960px wide box.

That's why your columns are being pushed down. Also, check out: http://ejohn.org/blog/sub-pixel-problems-in-css/

Answer 2

Just make a small change to your css...

Change:-

.col-1-4 {
     width: 23%;     
 }

To this:-

.col-1-4 {
     *width: 22.9%; 
     width: 23%;    
 }

Answer 3

How about double divs's. That will obviously solve the problem.

 .col-1-4 {
     position:relative;
     background: #eee;
     height: 200px;
     width: 25%;
    /*******************************/
    /* Don't use this properties, not necessary here */
     display: table-cell;
     *display: inline;
    /*******************************/
     zoom:1;
     float: left;
 }
 .col-1-4>div {
     background: #ddd;
     position:absolute;
     left:4%;
     right:4%;  /* 100/25 = 4 */
     top:0;
     bottom:0;
 }

Working Fiddle