Question

         #allday{
            width: 175px;
            border: 1px solid #e7e7e7;
            font-size: 12px;
            color: #666666;
            height: 22px;
        }

        <select id ="allday" style="">
            <option value = "false">FALSE</option>
            <option value = "true">TRUE</option>
        </select>

Does anyone know why the position of the select looks a little bit higher in Google Chrome than it does in FireFox?

Answer 1

Browsers have pre-defined CSS values for HTML elements. If you do not specify a certain CSS rule, the browser will put in it’s own for how it “thinks” it should look (if needed). For example, if you make a <div> element but do not specify the display: rule, Google Chrome will automatically set it to display: block;.

In any case, use inspect element and try to find where the browsers differ in the computed styles. Keep an eye out for User-Agent Stylesheet because those are the values inserted from the browser.

As the comments also said, a CSS RESET will also help.