如何使我的代码对Mozilla Firefox响应

Question

这是我的博客，我实现了带有值的选择标签。 我的问题是标签在chrome浏览器中正确显示。

但是，当我在Mozilla浏览器中打开博客时，它将标签从左向右拉伸，如下图所示，您可以查看它。 如何使它对Mozilla Firefox和所有浏览器都具有响应能力。

下面是我的代码。

 <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; } .k-input { font-weight:bold !important; font-size:12pt !important; color: green !important; } ::-webkit-input-placeholder { color: green; } ::-webkit-input-placeholder { color: green; font-weight: 800; } :-moz-placeholder { /* Firefox 18- */ color: green; font-weight: 800; } ::-moz-placeholder { /* Firefox 19+ */ color: green; font-weight: 800; } :-ms-input-placeholder { color: green; font-weight: 800; } .container:hover{ background-color:#F0F2F3; } </style> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" /> <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script> <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> <div class="container" style="overflow: hidden; border: 1px solid gray; width: 465px; margin-left: -180px; padding: 30px 70px 30px 170px;"> <div id="example" role="application" style="float:left;width:49%; margin-right:2%;margin-left: -32%;"> <div id="select" class="demo-section k-content"> <select id="size" placeholder="Skills, Designations...." style="width: 230px;border-width: 2px !important; border-color: #D8D3D3 !important;" > <option /> <option />to <option />code <option />way <option />always <option />easily </select> </div> </div> <div id="example1" role="application" style="float:left;width:49%;margin-right:0;margin-left: -5px;"> <div id="select" class="demo-section k-content"> <select id="size1" placeholder="Location" style="width: 140px;border-width: 2px !important; border-color: #D8D3D3 !important;" > <option /> <option />Delhi <option />Bangalore <option />Jammu and kashmir <option />ahmedabad <option />Arunachal Pradesh </select> </div> </div> <div id="example2" role="application" style=" float: right; margin-left: 95px; width: 49%; margin-right: 14px; margin-top: -47px;"> <div id="select" class="demo-section k-content"> <select id="size2" placeholder="Exp(Years)" style="width: 114px;border-width: 2px !important; border-color: #D8D3D3 !important; " > <option /> <option />0 Year <option />1 <option />2 <option />3 <option />4 </select> </div> </div> <div id="example3" role="application" style="float:right;width:49%;margin-right:-102px;margin-top: -47px;"> <div id="select" class="demo-section k-content"> <select id="size3" placeholder="Salary" style="width: 100px;border-width: 2px !important; border-color: #D8D3D3 !important; "> <option /> <option />&lt;1 Lac <option />2 <option />3 <option />4 </select> </div> </div> </div> <script> $(document).ready(function() { // create ComboBox from input HTML element // create ComboBox from select HTML element $("#size").kendoComboBox(); $("#size1").kendoComboBox(); $("#size2").kendoComboBox(); $("#size3").kendoComboBox(); var select = $("#size").data("kendoComboBox"); var select = $("#size1").data("kendoComboBox"); var select = $("#size2").data("kendoComboBox"); var select = $("#size3").data("kendoComboBox"); }); </script> 

Answer 1

在Firefox上测试过，也删除了内联样式。 打开代码段时，通过调整浏览器的大小来检查媒体查询。

您必须在代码段上单击整页才能查看响应。

 html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; } .k-input { font-weight:bold !important; font-size:12pt !important; color: green !important; } .container { display: flex; justify-content: space-between; } ::-webkit-input-placeholder { color: green; } ::-webkit-input-placeholder { color: green; font-weight: 800; } :-moz-placeholder { /* Firefox 18- */ color: green; font-weight: 800; } ::-moz-placeholder { /* Firefox 19+ */ color: green; font-weight: 800; } :-ms-input-placeholder { color: green; font-weight: 800; } .container:hover{ background-color:#F0F2F3; } @media(max-width: 480px) { .container { flex-direction: column; align-items: flex-start; } } 

 <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" /> <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script> <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> <div class="container" style=""> <div id="example" role="application" style=""> <div id="select" class="demo-section k-content"> <select id="size" placeholder="Skills, Designations...." style="" > <option /> <option />to <option />code <option />way <option />always <option />easily </select> </div> </div> <div id="example1" role="application" style=""> <div id="select" class="demo-section k-content"> <select id="size1" placeholder="Location" style="" > <option /> <option />Delhi <option />Bangalore <option />Jammu and kashmir <option />ahmedabad <option />Arunachal Pradesh </select> </div> </div> <div id="example2" role="application" style=""> <div id="select" class="demo-section k-content"> <select id="size2" placeholder="Exp(Years)" style="" > <option /> <option />0 Year <option />1 <option />2 <option />3 <option />4 </select> </div> </div> <div id="example3" role="application" style=""> <div id="select" class="demo-section k-content"> <select id="size3" placeholder="Salary" style=" "> <option /> <option />&lt;1 Lac <option />2 <option />3 <option />4 </select> </div> </div> </div> <script> $(document).ready(function() { // create ComboBox from input HTML element // create ComboBox from select HTML element $("#size").kendoComboBox(); $("#size1").kendoComboBox(); $("#size2").kendoComboBox(); $("#size3").kendoComboBox(); var select = $("#size").data("kendoComboBox"); var select = $("#size1").data("kendoComboBox"); var select = $("#size2").data("kendoComboBox"); var select = $("#size3").data("kendoComboBox"); }); </script>