Question

我有一个使用以下HTML / CSS的表单。它看起来像：

enter image description here

使用Firefox 31查看时，如果我缩小（https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages），它看起来像是：

enter image description here

是什么导致这种情况以及如何解决？

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Form Test</title>
        <style type="text/css">
            html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
                background: none repeat scroll 0 0 transparent;
                border: 0 none;
                font-size: 100%;
                margin: 0;
                outline: 0 none;
                padding: 0;
                vertical-align: baseline;
            }

            div.form-input, div.form-select {
                padding: 2px;
            }

            label.forInput {
                width: 200px;
                clear: both;
                float: left;
                font-size: 11px;
                font-weight: bolder;
            }

            input, select {
                width: 300px;
            }

            .findOnMap {
                float: right;
            }
            form {
                width: 536px;
            }

        </style> 
    </head>
    <body>
        <form class="dialog-form" id="addAccount" method="post" novalidate="novalidate">
            <div class="form-input">
                <label for="name" class="forInput">Name:</label>
                <input type="text" id="name" name="name" aria-required="true">
            </div>
            <div class="form-input">
                <label for="address" class="forInput">Street Address:</label>
                <input type="text" value="" id="address" name="address" autocomplete="off" placeholder="Enter a location">
                <a href="javascript:void(0)" class="findOnMap">map</a>
            </div>
            <div class="form-input">
                <label for="city" class="forInput">City:</label>
                <input type="text" value="" id="city" name="city">
            </div>
            <div class="form-input">
                <label for="state" class="forInput">State:</label>
                <input type="text" value="" id="state" name="state">
            </div>
        </form>
    </body>
</html>

Answer 1

您需要更改表单的宽度。如果你放大它，即使你多次缩小它也不会破坏你的布局。我将宽度更改为650px并删除了.findOnMap {float：right}，看起来很好。

Answer 2

您需要更改一些样式，以便它适合任何一种情况，因为所有浏览器都会使用确定的样式，因此在这种情况下make：

form {width: 600px}

.findOnMap {display: inline-block}

你可以在这里看到：

http://jsfiddle.net/29fb020c/10/

我检查了Chrome和FF并对其进行了缩放，并且没有中断。

Firefox浏览器缩放对CSS布局的影响

2 个答案: