html - 在 Firefox 中水平显示而不是垂直显示的下拉菜单

Question

我知道以前曾有人问过这个问题，但答案并没有解决我的问题。与其他所有浏览器不同，Firefox 上的下拉菜单是水平显示的，而不是垂直显示的。

horizontal drop down menu in Firefox

在我开始修改 CSS 之前它们一直显示正常，现在我不知道如何解决这个问题。有谁知道发生了什么事？我一直在搞乱 margin 和 padding 标签。

我尽量复制相关代码。对这些东西还很陌生。

谢谢!

@media only screen and (min-width: 641px)
#input_1_24 {
    letter-spacing: normal;
    padding: 0px;
    height: 30px;
    margin: 0px;
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}
@media only screen and (min-width: 641px)
.gform_wrapper .top_label input.small, .gform_wrapper .top_label select.small {
    width: 25%;
}
.gform_wrapper input.small, .gform_wrapper select.small, .gform_wrapper input.medium, .gform_wrapper select.medium, .gform_wrapper input.large, .gform_wrapper select.large, .gform_wrapper input.large, .gform_wrapper select.large {
    width: 100%;
}
.gform_wrapper select {
    font-size: inherit;
    font-family: inherit;
    letter-spacing: normal;
}
.gform_wrapper select {
    line-height: .5;
}
.gform_wrapper *, .gform_wrapper *:before, .gform_wrapper *:after {
    box-sizing: border-box;
}
select {
    width: 220px;
    border: 1px solid #ccc;
}
input[type=file], select {
    height: 30px;
    line-height: 30px;
}
.uneditable-input, input[type=text], input[type=password], input[type=datetime], input[type=datetime-local], input[type=date], input[type=month], input[type=time], input[type=week], input[type=number], input[type=email], input[type=url], input[type=tel], input[type=color], input[type=search], select, textarea {
    display: inline-block;
    height: 20px;
    padding: 4px 6px;
    margin-bottom: 0px;
    font-size: 14px;
    line-height: 20px;
    color: #555;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    vertical-align: middle;
}
button, input, label, select, textarea {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}
.navbar-search .search-query, button, input, select, textarea {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
button, input[type=button], input[type=reset], input[type=submit], input[type=radio], input[type=checkbox], label, select {
    cursor: pointer;
}
button, input, select, textarea {
    margin: 0;
    font-size: 100%;
    vertical-align: middle;
}
.img-polaroid, body, select {
    background-color: #fff;
}
user agent stylesheet
keygen, select, select[size="0"], select[size="1"] {
    border-radius: 0px;
    border-color: rgb(169, 169, 169);
}
user agent stylesheet
select:not(:-internal-list-box) {
    overflow: visible !important;
}
user agent stylesheet
select {
    -webkit-appearance: menulist;
    box-sizing: border-box;
    align-items: center;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    color: black;
    background-color: white;
    cursor: default;
    border-width: 1px;
    border-style: solid;
    border-color: initial;
}
user agent stylesheet
keygen, select {
    border-radius: 5px;
}
user agent stylesheet
input, textarea, keygen, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em 0em 0em 0em;
    font: 13.3333px Arial;
}
user agent stylesheet
input, textarea, keygen, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb;
}
Inherited from li#field_1_24.gfield.gfield_price.gfield_price_1_6.gfield_option_1_6.gfield_contains_required.field_sublabel_below.field_description_below
.gform_wrapper li, .gform_wrapper form li {
    margin-left: 0 !important;
    list-style-type: none !important;
    list-style-image: none !important;
    list-style: none !important;
    overflow: visible;
    overflow-y: auto;
}
dd, dt, li {
    line-height: 20px;
}
user agent stylesheet
li {
    display: list-item;
    text-align: -webkit-match-parent;
}
Inherited from ul#gform_fields_1.gform_fields.top_label.form_sublabel_below.description_below
.gform_wrapper ul.gform_fields {
    margin: 0 !important;
    list-style-type: none;
}
html>body .entry ul, .gform_wrapper ul {
    text-indent: 0;
}
user agent stylesheet
ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}
Inherited from div.summary.entry-summary
.entry-summary {
    text-align: justify;
}
Inherited from body.single.single-product.postid-358.logged-in.admin-bar.woocommerce.woocommerce-page.tc-fade-hover-links.tc-no-sidebar.tc-sticky-header.tc-transparent-on-scroll.no-navbar.skin-purple2.tc-regular-menu.tc-sticky-footer.customize-support.chrome.tc-smoothscroll.sticky-enabled
body, .navbar .nav>li>a {
    font-size: 15px;
    line-height: 20px;
}
body, .navbar .nav>li>a {
    font-family: 'Cantarell';
    font-weight: 400;
}
body {
    padding-bottom: 0;
    color: #5a5a5a;
    background: #fafafa;
}
body {
    margin: 0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
}
Inherited from html.js.flexbox.flexboxlegacy.canvas.canvastext.webgl.no-touch.geolocation.postmessage.websqldatabase.indexeddb.hashchange.history.draganddrop.websockets.rgba.hsla.multiplebgs.backgroundsize.borderimage.borderradius.boxshadow.textshadow.opacity.cssanimations.csscolumns.cssgradients.cssreflections.csstransforms.csstransforms3d.csstransitions.fontface.generatedcontent.video.audio.localstorage.sessionstorage.webworkers.applicationcache.svg.inlinesvg.smil.svgclippaths
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
Pseudo ::before element
.gform_wrapper *, .gform_wrapper *:before, .gform_wrapper *:after {
    box-sizing: border-box;
}
Pseudo ::after element
.gform_wrapper *, .gform_wrapper *:before, .gform_wrapper *:after {
    box-sizing: border-box;

<li id="field_1_24" class="gfield gfield_price gfield_price_1_6 gfield_option_1_6 gfield_contains_required field_sublabel_below field_description_below">
  <label class="gfield_label" for="input_1_24">Please     Choose a Size<span class="gfield_required">*    </span></label>
  <div class="ginput_container ginput_container_select"><select name="input_24" id="input_1_24" class="small gfield_select" tabindex="56" aria-required="true" aria-invalid="false"><option value="18&quot; x 12&quot; No extra cost|0" price="">18" x 12" No extra cost</option><option value="24&quot; x 16&quot; + $70|70" price=" +$70.00">24" x 16" + $70</option><option value="30&quot; x 20&quot; + $150|150" price=" +$150.00">30" x 20" + $150</option></select></div></li>

Answer 1

它看起来像是 Option 元素上的 display: inline-block。尝试将其设置为“阻止”并查看它是否将其恢复为垂直列表。

https://codepen.io/johnholtripley/pen/eGZoEj