Internet explorer Select-form 宽度问题答案

【问题标题】：Internet explorer Select-form width problemInternet explorer Select-form 宽度问题
【发布时间】：2019-11-18 17:09:49
【问题描述】：

我正在使用简单的 HTML 代码来显示一个选择下拉框。它在 Google Chrome、Firefox 等中正常工作，但它没有像我希望它在 Internet Explorer 中那样工作。选择下拉列表变得太长，以至于它在 IE 的框中已出现。

我已经尝试指定宽度：100%；和 max-width: 100% 的选择类，但它没有帮助。

.form-parent {
    .form-container {
        input {
            border-color: $ThemeColorLightGray;
            background-color: $ThemeColorLightGray;
        }
    }
}

.form-container {
    display: inline-block;
    width: 100%;
    padding: 0 0 40px;

    .form-control,
    .base-datepicker[readonly] {
        border-color: $ThemeColorLightGray;
        background-color: $ThemeColorLightGray;
    }
    .form-tooltip {
        display: inline-block;
        position: absolute;
        }
}

.form-control {
  display: block;
  width: 100%;
  height: calc(2.25rem + 2px);
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0;
}

select {
  -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: black;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: start;
  white-space: pre;
  -webkit-rtl-ordering: logical;
  cursor: default;
  font: 400 13.3333px Arial;
}

<form method="POST" action="" class="custom-form form-parent js-flex-box">
  <div class="form-container">
    <fieldset>
      <div class="form-group">
        <div class="groupOrder" style="width: 100%; overflow: hidden; background-color: red;">
          <select name="Hotel" placeholder="Vælg hotel" title="Vælg hotel" aria-label="Vælg hotel" class="pham form-control pristine touched" aria-required="true" aria-invalid="false" style="overflow: hidden !important; float: right;">
            <option value="" selected="selected">Vælg hotel</option>
            <option value="Wakeup Copenhagen">Wakeup Copenhagen, Bernstorffsgade</option>
            <option value="Wakeup Copenhagen, Borgergade">Wakeup Copenhagen, Borgergade</option>
            <option value="Wakeup Copenhagen, Carsten Niebuhrs Gade">Wakeup Copenhagen, Carsten Niebuhrs Gade</option>
            <option value="Wakeup Aarhus, Bruunsgade">Wakeup Aarhus, Bruunsgade</option>
          </select>
        </div>
        <div class="form-tooltip">
          <div style="display: none;">Dette felt skal udfyldes</div>
        </div>
      </div>
    </fieldset>
  </div>
</form>

【问题讨论】：

在这个类似的线程中尝试接受的答案：stackoverflow.com/questions/9801021/…
另外，如果没有一点代码，我们怎么可能提供帮助？据我们所知，您可能有一个说 width:20000px 的类。
@ThomasByy 我现在尝试附上代码，请检查
您在 3 个不同位置的选择框上调用了 100% 宽度。你能在 Chrome 上发布它的样子吗？也许填充导致它> 100％；
@ThomasByy 我有在线链接如果你想访问的话，如果你没问题的话

标签： javascript html css internet-explorer bootstrap-4

【解决方案1】：

我认为你可以像我一样将它包裹在一个主容器下并且它起作用了

主要变化

包装在主容器中

    <div class='mainCon' style='background-color: red;width: 80%;'> 
     ........
     ........
     ........
    </div>

然后在css中

#mainCon
{
  display: block;
  background-color: red;
}

.pham {
    width: 100%;
}

#mainCon
{
  display: block;
  background-color: red;
}
.form-control {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0;
    }
   
   select {
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: black;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-align: start;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    cursor: default;
    font: 400 13.3333px Arial;
}

<div class='mainCon' style='background-color: red;width: 80%;'>

<div class="form-group">


  <div>
  <input type='text'>
  </div>

<div>
  <input type='text'>
  </div>
  <div>
  <input type='text'>
  </div>
<select name="Hotel" placeholder="Vælg hotel" title="Vælg hotel" aria-label="Vælg hotel" class="pham form-control pristine touched" aria-required="true" aria-invalid="false" style="width: 100%;">
    <option value="" selected="selected">Vælg hotel</option>
    <option value="Sample1">Sample 1</option>
    <option value="Sample2">Sample 2</option>
    <option value="Sample3">Sample 3</option>
    <option value="Sample4">Sample 4</option>
  </select>
  <div class="form-tooltip">
    <div style="display: none;">Dette felt skal udfyldes</div>
  </div>
</div>

 <div>
  <input type='text'>
  </div>

<div>
  <input type='text'>
  </div>
  <div>
  <input type='text'>
  </div>

</div>

【讨论】：