Saturday, June 29, 2013

Css grid system : avoid box-sizing ie7 problems. boxsizing.htc



Responsive grid css frameworks are great solution to the problem of many screens visiting your site, there are many of these frameworks around, you can pick any one you like, depending on your needs, you may find small or large ones.


but the main problem with these frameworks is they are rely on javascripts, to solve issues like padding and borders on ie7, which can be solved using border-box in modern browsers.


If you are looking for css grid framework and you are concern about the size and the loading time of your page, then absolutely you will consider remove extra scripts to Speed up your page loading.


the best solution to this problem is to look at the grid system as layout lines and not content boxes. and put your content inside divs within the grid columns . So you can add padding and borders to the child div not to the grid column and that will not affect the grid layout.


Another thing to void is "Don't give the columns any extra margins that not required by the grid system".


If that is not working and you still have floating out columns then create a special grid columns rules that working only for ie7, that means you are going to change the percent numbers of each column.

Last option you have to accept javascript solution for this, Just Add :

*behavior: url(boxsizing.htc);

to the box-sizing css rule after you downloaded the file to your website. 


Another Solution is to download this script PIE.

No comments:

Post a Comment