Search code examples
cssgoogle-chromesafariwebkit

Can I make CSS written for safari on OS X work in chrome for windows?


I understand both browsers use webkit but when I display a form in safari for OS X the input checkboxes are lined up perfectly in a div.

If I go to chrome then the checkboxes are all over the place.

I was wondering if there was CSS code that could ensure it's lined up perfectly in both browsers? It's not just the checkboxes that are out of line, it's all of the inputs.

Chrome on windows is version 47 Safari on OS X is version 9

If someone could point me in the right direction I'd appreciate it.

Thank You

                <div style="position:relative;text-align:left;top: 15px;left: 193px;">
                <?php echo form_label('Head:','head'); ?><?php echo form_checkbox(array('name'=>'head','type'=>'checkbox','value'=>'1')); ?>
                </div>

Solution

  • The best thing you can do for some cross-browser compatibility is not use any kind of absolute positioning.

    From your description, it seems like you have the width of the text inputs as a fixed amount, but the container can't hold both the checkboxes and the text inputs.

    Maybe set the inputs to width: calc(100% - #px);.