Question

我在html标签输入中使用min选项，但它在IE（版本11）和chrome（版本46.0.2490.71）上显示不同的视觉显示确切的问题是，当我使用chrome打开此页面时，输入字段变得越来越长。在IE中，它会按照我想要的方式显示（和我不使用min时相同）

注意：要查看差异，请在IE中打开html文件，因为jsfiddle显示将始终是我不想要的（带有超长输入字段）

示例jsfiddle是：min demo

在使用html标签输入类型=“数字”中的min时，能否建议我在IE和Chrome上显示相同的显示方法

HTML代码：

<html>
    <head>
        <title>CommDesk AdminPage</title>
        <meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                addPlusSign();
                $(".btn1").click(function(){
                    $(".expand1").toggle();
                    var btn1Text = $(".btn1").text();
                    if(btn1Text.indexOf("+") > -1){
                        var temp = btn1Text.replace(/\+|\-/ig, '-');
                        $(".btn1").text(temp);
                    } else if (btn1Text.indexOf("-") > -1){
                        var temp = btn1Text.replace(/\+|\-/ig, '+');
                        $(".btn1").text(temp);
                    }
                });
            })
            function addPlusSign(){
                if($(".expand1")){
                    var btn1Text = $(".btn1").text();
                    $(".btn1").text(btn1Text + " [+]");
                }
            }
            $(function () {
                $('.admin-form')
                //we need to save values from all inputs with class 'admin-input'
                .find(':input.admin-input')
                .each(function () {
                    //save old value in each input's data cache
                    $(this).data('oldValue', $(this).val())
                })
                .end()
                .submit(function (ev) {
                    var changed = false;
                    $(':input.admin-input', this).filter(function () {
                        if($(this).val() != $(this).data('oldValue')){
                            changed = true;
                        }
                    });
                    if($(this).hasClass('changed') && (!changed)){
                        alert("None of the thresholds were changed!");
                        ev.preventDefault()
                    }
                    if($(this).hasClass('changed') && changed){
                        var allowSubmit = window.confirm("You have set a unique threshold for one or more sub-elements below. Are you sure you want to reset them all?")
                        if (!allowSubmit)
                        ev.preventDefault()
                    }
                });
            });
            $(document).on('input', '.admin-input', function(){
                $(this).closest('form').addClass('changed');
            });
        </script>

        <style>
        .expand1 { display: none;
        }
        .btn1 { cursor: pointer;
        }
        body {
        background-color: rgb(255,255,255);
        font: 15px Verdana, Helvetica, sans-serif;
        }

        table#t02, #t02 th, #t02 td {
            border: none;
            border-collapse: collapse;
            font-size:90%;
            font-weight:normal;
        }

        #button1{
            position: relative;
            top:10px;
            left:75%;
            color: white;
            background-color: rgb(0,89,132);
            font-weight: bold;
        }
        </style>

    </head>
    <body>
        <form id="form1" method="post" class="admin-form">
            <div style="float:left; width:50%">
                <table id="t02" class="table2">
                    <tr>
                        <th style="padding:0 30px 0 0;"></th>
                        <th></th>
                        <th style="padding:0 10px 0 0;">Green</th>
                        <th colspan="3" style="padding:0 10px 0 0">Yellow</th>
                        <th></th>
                        <th style="padding:0 10px 0 0">Red</th>
                    </tr>
                    <tr>
                        <td class="btn1" style="padding:0 30px 0 0;"><b>Call Volume</b></td>
                        <td>&lt</td>
                        <td style="padding:0 10px 0 0"><input type="number", class="admin-input", name="acd_call_volume_good_high", min="0", value="50"></td>
                        <td><input type="number", class="admin-input", name="acd_call_volume_warning_low", min="50", value="50"></td>
                        <td>to</td>
                        <td style="padding:0 10px 0 0"><input type="number", class="admin-input", name="acd_call_volume_warning_high", min="50", value="100"></td>
                        <td>&gt</td>
                        <td style="padding:0 10px 0 0"><input type="number", class="admin-input", name="acd_call_volume_critical_low", min="100", value="100"></td>
                    </tr>
                    <tr>
                        <td align="center" class="expand1">Day of Job (DOJ)</td>
                        <td class="expand1">&lt</td>
                        <td class="expand1"><input type="number", name="acd_call_volume_good_high_Day of Job (DOJ)", min="0", value="50"></td>
                        <td class="expand1"><input type="number", name="acd_call_volume_warning_low_Day of Job (DOJ)", min="50", value="50"></td>
                        <td class="expand1">to</td>
                        <td class="expand1"><input type="number", name="acd_call_volume_warning_high_Day of Job (DOJ)", min="50", value="100"></td>
                        <td class="expand1">&gt</td>
                        <td class="expand1"><input type="number", name="acd_call_volume_critical_low_Day of Job (DOJ)", min="100", value="100"></td>
                    </tr>
                </table>
                <input type="submit" name="submitButton" value="Submit" id="button1" style="height:50px; width:100px"/>
            </div>
        </form>
    </body>
</html>

CSS：

.expand1 { display: none;
}
.btn1 { cursor: pointer;
}
body {
background-color: rgb(255,255,255);
font: 15px Verdana, Helvetica, sans-serif;
}

table#t02, #t02 th, #t02 td {
border: none;
border-collapse: collapse;
font-size:90%;
font-weight:normal;
}

#button1{
position: relative;
top:10px;
left:75%;
color: white;
background-color: rgb(0,89,132);
font-weight: bold;
}

Answer 1

我在html标签输入中使用min选项，但显示不同视觉显示

数字输入的min属性设置用户可以输入的最小值。它与输入的大小无关。

如果要限制这些输入字段的宽度，则需要在CSS文件中使用max-width：

input[type=number] {
  max-width: 100px;
}

但是，这并不能防止字段小于100px。如果您希望它始终是特定宽度，请改用width。

您也不需要用逗号分隔属性。

Mike是正确的，如果可能的话，你应该使用CSS而不是表来进行布局，但这将解决你问题中的问题。如果您决定摆脱桌面，我建议您阅读flexbox。

下面的Runnable片段：

// ADD THIS CSS
input[type=number] {
  max-width: 100px;
}

.expand1 { display: none;
}
.btn1 { cursor: pointer;
}
body {
background-color: rgb(255,255,255);
font: 15px Verdana, Helvetica, sans-serif;
}

table#t02, #t02 th, #t02 td {
border: none;
border-collapse: collapse;
font-size:90%;
font-weight:normal;
}

#button1{
position: relative;
top:10px;
left:75%;
color: white;
background-color: rgb(0,89,132);
font-weight: bold;
}

<form id="form1" method="post" class="admin-form">
<div style="float:left; width:50%">
<table id="t02" class="table2">
<tr>
<th style="padding:0 30px 0 0;"></th>
<th></th>
<th style="padding:0 10px 0 0;">Green</th>
<th colspan="3" style="padding:0 10px 0 0">Yellow</th>
<th></th>
<th style="padding:0 10px 0 0">Red</th>
</tr>
<tr>
<td class="btn1" style="padding:0 30px 0 0;"><b>Call Volume</b></td>
<td>&lt</td>
<td style="padding:0 10px 0 0"><input type="number" class="admin-input" name="acd_call_volume_good_high" min="0" value="50"></td>
<td><input type="number", class="admin-input" name="acd_call_volume_warning_low" min="50" value="50"></td>
<td>to</td>
<td style="padding:0 10px 0 0"><input type="number" class="admin-input" name="acd_call_volume_warning_high" min="50" value="100"></td>
<td>&gt</td>
<td style="padding:0 10px 0 0"><input type="number" class="admin-input" name="acd_call_volume_critical_low" min="100" value="100"></td>
</tr>
<tr>
<td align="center" class="expand1">Day of Job (DOJ)</td>
<td class="expand1">&lt</td>
<td class="expand1"><input type="number" name="acd_call_volume_good_high_Day of Job (DOJ)" min="0" value="50"></td>
<td class="expand1"><input type="number" name="acd_call_volume_warning_low_Day of Job (DOJ)" min="50" value="50"></td>
<td class="expand1">to</td>
<td class="expand1"><input type="number" name="acd_call_volume_warning_high_Day of Job (DOJ)" min="50" value="100"></td>
<td class="expand1">&gt</td>
<td class="expand1"><input type="number" name="acd_call_volume_critical_low_Day of Job (DOJ)" min="100" value="100"></td>
</tr>
</table>
<input type="submit" name="submitButton" value="Submit" id="button1" style="height:50px; width:100px"/>
</div>
</form>

来源：

http://www.w3.org/TR/html5/forms.html#the-min-and-max-attributes

https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

HTML如何在html标记输入中使用min时在IE和chrome上获得一致的结果

1 个答案: