Question

我已经开始学习HTML5。我面临同样事情的主要问题是在不同的浏览器/版本中以不同的方式工作。特别是在IE中很难工作。下面是我的代码片段，它在Chrome中完美运行，但在IE11中却没有。

我有两个版本的IE，IE8和IE11。我想在IE中的不同版本中运行相同的版本并知道它的技巧/调整。

Left one IE11 and Right one Chrome

<!doctype html>
<html>
<head>
    <title>Web Forms API</title>
    <style>
        label {
            margin-top: 20px;
            display: block;
        }

        input {
            width: 200px;
        }

            input[type=submit] {
                width: auto;
            }

        .col {
            display: table-cell;
            width: 300px;
        }
    </style>
</head>
<body>


    <form method="post" action="NewURL"> 
      <label for="yearsInDev">Number Demo:</label>
            <input type="number" name="MyNuberElement" id="MyNumberElement" />

            <label for="devExperienceRange">Range Demo:</label>
            <input type="range" name="MyRangeElement" id="MyRangeElement"/>

            <label for="bgcolor">Color Demo</label>
            <input type="color" id="MyColorElement" name="MyColorElement" />

            <label for="arrivalDate">Date Demo</label>
            <input type="date" id="MyDateElement" name="MyDateElement" />

            <label id="arrivalTime">Time Demo</label>
            <input type="time" id="MyTimeElement" name="MyTimeElement"/>


            <label for="arrivalDTLocal">DateTime Local Demo</label>
            <input type="datetime-local" id="MyDateTimeLElement" name="MyDateTimeLElement" />

            <label id="arrivalDT">DateTime Demo</label>
            <input type="datetime" id="MyDateTimeElement" name="MyDateTimeElement" />


            <label for="birthMonth">Birth Month</label>
            <input type="month" id="MyMonthElement" name="MyMonthElement" autofocus />

            <label for="vacationWeek">Vacation Week</label>
            <input type="week" id="MyWeekElement" name="MyWeekElement" />

            <input type="text" placeholder="Enter Value" id="MyPlaceHolderControl" 
               name="MyPlaceHolderControl" autocomplete="on" />

        <input type="submit" value="Go!" />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </form>

</body>
</html>

请帮助

Answer 1

当您处理不同的浏览器时，

您可以使用 reset.css ，这将刷新浏览器上的每个样式，并且您可以设置自己的所有样式
您可以使用webkit

 filter:progid:DXImageTransform.Microsoft.gradient( ... );/* IE8- */
  width: -ms-linear-gradient(200px); /* IE10+ */
  width: -webkit-linear-gradient(200px); /* For Safari 5.1 to 6.0 */
  width: -o-linear-gradient(200px); /* For Opera 11.1 to 12.0 */
  width: -moz-linear-gradient(200px); /* For Firefox 3.6 to 15 */
  width: linear-gradient(200px); /* Standard syntax */

IE11中的HTML5无法正常工作但在Chrome中表现不错

1 个答案: