CSS列在FF上工作，在Chrome上中断，IE10_Css_Google Chrome_Internet Explorer 10_Multiple Columns

CSS列在FF上工作，在Chrome上中断，IE10

css google-chrome

CSS列在FF上工作，在Chrome上中断，IE10,css,google-chrome,internet-explorer-10,multiple-columns,Css,Google Chrome,Internet Explorer 10,Multiple Columns,在不同浏览器之间查看同一页面时，我遇到了布局急剧变化的问题在Firefox中，页面呈现得非常漂亮，正如我所需要的那样。截图如下：在Chrome中，它根本不尊重列布局右边的表单都在左边的列上，它的文本区域在第二列上，我想按钮在第三列上 HTML在这里： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XMLSVC Upload Test Page

在不同浏览器之间查看同一页面时，我遇到了布局急剧变化的问题

在Firefox中，页面呈现得非常漂亮，正如我所需要的那样。截图如下：

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

右边的表单都在左边的列上，它的文本区域在第二列上，我想按钮在第三列上

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>

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

使用display:table或flex，这将使您的工作更加轻松display:flex工作正常，是的。谢谢你的提醒。我希望有人知道如何在显示器上摇动多列：flex将表单挤压在一起，挤压左边的表单。

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%;
}