Explorer 和 Chrome 中的 div 宽度太大答案

【问题标题】：div width is too large in Explorer and ChromeExplorer 和 Chrome 中的 div 宽度太大
【发布时间】：2018-07-29 21:55:06
【问题描述】：

我有一个名为“wrapper”的 div，其中包含输入字段。在 Firefox 中一切看起来都不错，但是如果我在 Explorer 和 Chrome 中运行我的代码，我的包装器的宽度太大并且它的位置会跳到右边。这是我的css代码：

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

#type { 

    padding: 5px; 
    border: 0.5px solid LightGray; 
    width: 250px;
    color: #707070;
    font-size: 15px;
    border-radius: 4px;

}

#address, #lng, #lat {
    width: 100%;
    padding: 3px;
    border: 0.5px solid LightGray;
    color: #707070;
    font-size: 13px;
    border-radius: 4px;

}


label {
    color: #707070;
}

 #wrapper {
    position: fixed;
    top: 10px;
    left: 2%;
    z-index: 5;
    background-color: #fff;
    padding: 15px;
    text-align: rigth;
    line-height: 30px;
    padding-left: 10px;
    border-radius: 2px;
    opacity: 0.95;
  }

这是我的 html 文件。

<body>
<div id="wrapper">

    <input id="input-id" type="file" class="file-loading" multiple>         
    <br/>
    <select id="type" title="Select Map Version" onchange="filterMarkers(this.value);">
         <option value="all">All Map Versions</option>
    </select><br/><br/>

    <label for="adress">Adresse:</label><input id="address" type="textbox"></input><br/><br/>   
    <input id="submit" type="button" class="btn btn-dark" value="search"><br/><br/>

    <label for="Long">Longitude:</label><input id="lng" type="textbox"></input><br/>
    <label for="Lat">Latitude:</label><input id="lat" type="textbox"></input><br/><br/>
    <input id="submit2" type="button" class="btn btn-dark" value="search"><br/><br/>


</div>

【问题讨论】：

标签： html css internet-explorer firefox

【解决方案1】：

如果您删除 </input>s，您的代码应该可以正常工作。运行下面的sn-p：。我在 FF 和 Chrome 中都运行它，表单字段显示在左侧。

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

#type { 

    padding: 5px; 
    border: 0.5px solid LightGray; 
    width: 250px;
    color: #707070;
    font-size: 15px;
    border-radius: 4px;

}

#address, #lng, #lat {
    width: 100%;
    padding: 3px;
    border: 0.5px solid LightGray;
    color: #707070;
    font-size: 13px;
    border-radius: 4px;

}


label {
    color: #707070;
}

 #wrapper {
    position: fixed;
    top: 10px;
    left: 2%;
    z-index: 5;
    background-color: #fff;
    padding: 15px;
    text-align: rigth;
    line-height: 30px;
    padding-left: 10px;
    border-radius: 2px;
    opacity: 0.95;
  }

<div id="wrapper">

    <input id="input-id" type="file" class="file-loading" multiple>         
    <br/>
    <select id="type" title="Select Map Version" onchange="filterMarkers(this.value);">
         <option value="all">All Map Versions</option>
    </select><br/><br/>

    <label for="adress">Adresse:</label><input id="address" type="textbox"><br/><br/>   
    <input id="submit" type="button" class="btn btn-dark" value="search"><br/><br/>

    <label for="Long">Longitude:</label><input id="lng" type="textbox"><br/>
    <label for="Lat">Latitude:</label><input id="lat" type="textbox"><br/><br/>
    <input id="submit2" type="button" class="btn btn-dark" value="search"><br/><br/>


</div>

【讨论】：

【解决方案2】：

尝试在您的 CSS 中使用 * {box-sizing: border-box;}。

【讨论】：