使用线性渐变CSS将html Div除以12列

Question

I want to divide Div in to 12 equal column using CSS linear-grediant. IT needs to work on IE, Chrome and FF

I am facing issue on IE browser and Chrome browser.

1. Chrome browser showing some extra space after 12 Column on window resize.
2. IE not showing Grid Lines on Window Resize if use background-repeat: round and window size is less than 900 px
3. IE showing only 11 Column if user background-repeat: space

HTML Code

 .grid-lines { background-size: 8.3469%;/*8.39*/ background-image: linear-gradient(to left, #EECBCB 1px, transparent 1px); background-image: -webkit-linear-gradient(left, #EECBCB 1px, transparent 1px); background-image: -moz-linear-gradient(to left, #EECBCB 1px, transparent 1px); background-image: -o-linear-gradient(to left, #EECBCB 1px, transparent 1px); background-color: white; background-repeat: round; //background-repeat: space; } 

 <div style="width:100%;height:100px" class="grid-lines"> </div> 

here is my Code https://jsfiddle.net/07eaht8L/3/

Thanks In Advance...

Answer 1

If you change 1px to 0.07em (the lowest IE seems to accept), it will stop the disappearing/flickering on Window Resize.

https://jsfiddle.net/0n55p0p2/

background-image: linear-gradient(to left, #EECBCB 0.07em, transparent 0.07em);

This is not a perfect solution, as 0.0625em = 1px, but I cannot see the difference in a side by side comparison. However, it might be a subpixel rendering issue with IE and this bit of extra width stops it from disappearing.

I have tried transform, scaling, anti-aliasing but it does not work for gradient.

To Remove Extra Space in Chrome

I think it's a percentage bug in WebKit calculating subpixels.

You could create a media query that changes the width % in Chrome WebKit only. The space changes when browser is scaled. I have picked % and resolution values that counter the extra space. Change the values to what you think works best.

And do not use background-repeat: round or space.

https://jsfiddle.net/frpfgp16/

@media (max-width: 720px) {
  .grid-lines {
      -webkit-background-size: 8.5% !important;
  }
}
@media (min-width: 721px) {
  .grid-lines {
      -webkit-background-size: 8.39% !important;
  }
}