文本框在IE和Chrome上的呈现方式不同

Question

我的文本框在IE和Chrome上呈现的方式非常不同

IE

铬

您可以看到IE中文本框的宽度很小。

我的html被定义为

 <input id="Name" data-bind ="value:Name" style="width: 210px"/>

我尝试下载normalize.css并包含在我的脚本顶部，但仍然在不同浏览器上呈现错误。

我确信需要更多输入，所以请让我知道你们需要解决我的问题。

这些是我正在使用的脚本

<link href="css/normalize.css" rel="stylesheet" />
<script src="../Myfolder/External/jQuery/jquery-1.7.2.js"></script>
<link href="../Myfolder/External/jQuery UI/css/smoothness/jquery-ui-1.8.20.custom.css" rel="stylesheet" />


<script src="../Myfolder/External/jQuery UI/js/jquery-ui-1.8.20.custom.min.js"></script>

<link href="../Myfolder/Styling/common.css" rel="stylesheet" />

<script src="../Myfolder/External/Knockout/knockout-2.2.0.js"></script>

<script src="../Myfolder/External/JSON/json2.min.js"></script>

<script src="../Myfolder/External/Knockout/Plugins/koExternalTemplateEngine_all.min.js"></script>

<script src="../Myfolder/External/Knockout/Plugins/knockout.validation.js"></script>

<script src="../Myfolder/External/Knockout/Plugins/knockout.mapping-latest.js"></script>
<link href="../Myfolder/External/Kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="../Myfolder/External/Kendo/styles/kendo.default.min.css" rel="stylesheet" />
<link href="../Myfolder/External/Bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="../Myfolder/External/Bootstrap/css/responsive.css" rel="stylesheet" />

<script src="../Myfolder/External/Bootstrap/js/bootstrap.js"></script>

<script src="../Myfolder/External/Kendo/kendo.web.min.js"></script>
<script src="../NewUI2013/AgrOD/external/amplify/amplify.min.js"></script>
<script src="../Myfolder/External/Knockout/Plugins/knockout-kendo.min.js"></script>
<script src="../Myfolder/External/Knockout/knockout.dirtyFlag.js"></script>
<script src="../Myfolder/Custom/customKO.js"></script>
<script src="../Myfolder/Custom/custom.js"></script>

Answer 1

设置height:25px或任何其他值应该可以解决问题。最有可能的问题是，由于你使用了很多外部源的css文件，浏览器可能会误解其中一些。