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.
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...
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;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.