Question

在不同浏览器之间查看同一页面时，我的布局发生了巨大变化。

在Firefox中，页面渲染效果非常好，就像我需要的那样。屏幕截图如下：

Page rendering in Firefox. The page displays two forms in two columns, with the left column half the width of the right column.

在Chrome中，它根本不尊重列布局。

Page rendering in Chrome. The form from the right column is spread across both columns, and the inputs are not all in order. It's all jenked.

右边的表格全部在左栏，其文字区域在第二栏，我认为按钮在第三栏。

HTML就在这里：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>XMLSVC Upload Test Page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="blahblah/thisPage.js"></script>
    <link rel="stylesheet" type="text/css" href="blahblah/thisPage.css"/>
</head>
<body>
    <main>
        <div class="col1">
            <p>Use these forms to upload XML files into the study </p><br/>
            <form id="multipartUpload" method="post" enctype="multipart/form-data">
               <fieldset>
                   <legend>multipart/form-data</legend>
                   <label for="mpUsername">Username:</label>
                   <input type="text" name="username" id="mpUsername" /><br/>
                   <label for="mpPassword">Password:</label>
                   <input type="password" name="password" id="mpPassword" /><br/>
                   <label for="mpXmlData">XML File:</label>
                   <input type="file" name="xmlData" it="mpXmlData" /><br/>
                   <input id="submitMultipart" type="button" value="Submit" onClick="uploadMultipart();"/><br/>
               </fieldset>
            </form>
            <fieldset>
            <legend>Output</legend>
            <div id="patientUploadDIV"></div>
            </fieldset>
        </div>
        <div class="col2">
            <form id="xmlUpload" >
                <fieldset>
                    <legend>application/x-www-form-urlencoded</legend>
                    <label for="username">Username:</label>
                    <input type="text" name="username" id="username" /><br/>
                    <label for="password">Password:</label>
                    <input type="password" name="password" id="password" /><br/>
                    <label for="xmlData">XML File:</label>
                    <textarea id="xmlData" rows="50" cols="100" name="xmlData"></textarea><br/>
                    <input id="submitUpload" type="button" value="Submit" onclick="uploadPatient();"/>
                    <input id="submitStringMultipart" type="button" value="Submit Multipart/Form-Data" onclick="uploadStringMultipart();"/>
                </fieldset>
            </form>
        </div>
    </main>

</body>
</html>

CSS就在这里：

main {
   -webkit-column-count: 3; /* Chrome, Safari, Opera */
   -moz-column-count: 3; /* Firefox */
   column-count: 3;
}
div .col1 {
   -webkit-column-span: 1; /* Chrome, Safari, Opera */
   column-span: 1;
}
div .col2 {
   -webkit-column-span: 2; /* Chrome, Safari, Opera */
   column-span: 2;
}

input[type="button"] {
   margin-right: 2%;
}

奖金问题：如何在IE10中正确渲染？这不重要;这只是一个内部页面，用于测试servlet是否在所有可能的条件下正确接受数据。但我不知道测试人员是否会在IE10或Chrome中工作，并且可以安全地假设他们不会使用Firefox。

CSS列适用于FF，在Chrome上运行，IE10

0 个答案: