输入边框显示在Chrome中，但不在IE中 [英] Input border displays in Chrome but not in IE

问题描述

我创建了一个web表单，并且发现了一个奇怪的小错误或其他东西：当我添加到文本输入字段的边框和背景样式在Chrome中运行时，我在IE8或9中没有任何东西。在，没有边界或背景。看看它，你甚至不知道输入字段存在，除非你点击标签或设法点击正确的地方，因为焦点属性工作得很好。

I'm creating a web form, and I've discovered a weird little bug or something: while the border and background styling that I add to my text input fields works in Chrome, I get nothing in IE8 or 9. As in, no borders or backgrounds. To look at it, you would not even know the input fields exist unless you either hit tab or manage to click in the right place, as the focus attribute works just fine.

我见过几个有相反问题的问题 - 边界在IE中可用，但不适用于Chrome - 但不适用于此。我尝试过边框：默认，我尝试过非常黑暗的背景，我尝试删除我的CSS中的整个类，并且我的输入字段在IE中仍然不可见，除非它们聚焦。

I've seen several questions that have the reverse problem - border works in IE but not Chrome - but not for this one. I've tried border:default, I've tried really dark backgrounds, I've tried deleting the entire class in my css, and my input fields are still invisible in IE unless they are focused.

下面是我的CSS的一部分（省略了绝对不相关的部分）：

Here are parts of my CSS (left out definitely un-related sections):

input[type='checkbox']
{
    width:1em;
    float:left;
    margin-left:1em;
    margin-right:0.5em;
    border:none;
}

.form
{

    font-size:12px;
    font-family:Georgia;
    width:25em;
    color:#000;
}

.form_large
{

    background:#fff;
    font-family:Georgia;
    font-size:12px;
    width:35em;
    border:2px inset #ccccff
}

.form_medium {  

    font-size:12px;
    font-family:Georgia;
    width:20em;
    color:#000;
    margin-left:0.5em;
    border:2px inset #ccccff;
}

.form_qty {

    font-size:12px;
    font-family:Georgia;
    width:3em;
    color:#000;
    margin-left:0.5em;
    border:2px inset #ccccff;
}

input[type='text'], input[type='tel'], input[type='email']
{

    color:#000033;
    background:#FFF;
    border:1px thin #99ccff;
}

input[type='checkbox']
{

    color:#cFF;
}

li input[checkbox], input[text]
{

    left:-2;
    margin-left:0;
    opacity:0;
    z-index:2;
    cursor:pointer;
    height:1em;
    width:1em;
    top:0;
    border:1px solid #000033;
}

And here are (parts of) the related HTML (it's a pretty long form):

< li class ='sub_1'>
< input name ='Questions'type ='text'class ='form_large'cols =60rows =5placeholder ='您对设备或我们的服务有任何疑问吗？ 'input_6'/>
< / li>
< / ol>
< / li>
< / ol>
< ol>
< li class ='main'>
< input name ='Visit'type ='checkbox'checked id ='checkbox_2'label =labelfor ='checkbox_2'/>
访问（选择类型，所有适用）：
< ol>
< li class ='sub_1'>
< input name ='Service'type ='checkbox'id =checkbox_3label =labelfor ='checkbox_3'/>
服务
< ol>
< li class ='sub_2'>
< input name ='更改过滤器'type ='checkbox'id ='checkbox_4'/>
更改过滤器
< ol>
< li class ='sub_3'>
< input name ='Salt'type ='checkbox'id ='salt_del'/>
递送Salt
< input type =textname ='del_salt'id ='del_salt'class ='form_qty'/>
< / li>
< / ol>
< / li>
< li class ='sub_2'>
< input name ='Repair'type ='checkbox'id ='checkbox_5'/>
修复< / li>
< li class ='sub_2'>
< input name ='Move'type ='checkbox'id ='checkbox_6'/>
移动设备< / li>
< li class ='sub_2'>
< input name ='Hook_Up'type ='checkbox'id ='checkbox_7'/>
连接设备< / li>
< li class ='sub_2'>
< input name ='Disconnect'type ='checkbox'id ='checkbox_8'/>
断开连接设备< / li>
< / ol>
< / li>
< li class ='sub_1'>
< input name ='Delivery'type ='checkbox'id =checkbox_9label =labelfor ='checkbox_9'/>
交货（指定数量）

<label for="input_1">Name/Company*</label> <input type="text" name='name' id="input_1" placeholder='Full name or Company name' required='required' class='form_medium' /> </p> <p> <label for="input_2">Address</label> <input type="text" name='Address' id="input_2" class='form_medium' /> </p> <p> <label for='input_3'>City*</label> <input type='text' id='input_3' name='City' required='required' class='form_medium' /> </p> <p> <label for='input_4'>Phone*</label> <input type='tel' pattern="\d{10}" name='phone' placeholder='e.g. 0123456789'id='input_4'class='form_medium' required='required' /> </p> <p> <label for="input_5">E-mail</label> <input type="email" name='email' placeholder='e.g. [e-mail]'id="input_5" class='form_medium' /> </p> <p><p3>Please select all that apply:</p3></p> <ol> <li class='main'> <input name='questions' type='checkbox' id='checkbox_1'label="label" for='checkbox_1' /> Questions:** <ol> <li class='sub_1'> <input name='Questions' type='text' class='form_large' cols="60" rows="5" placeholder='Do you have any questions about your equipment or our services?' id='input_6' /> </li> </ol> </li> </ol> <ol> <li class='main'> <input name='Visit' type='checkbox' checked id='checkbox_2'label="label" for='checkbox_2' /> Visit (select type, all that apply): <ol> <li class='sub_1'> <input name='Service' type='checkbox' id="checkbox_3" label="label" for='checkbox_3' /> Service <ol> <li class='sub_2'> <input name='Change Filters' type='checkbox' id='checkbox_4' /> Change filters <ol> <li class='sub_3'> <input name='Salt' type='checkbox' id='salt_del' /> Deliver Salt <input type="text" name='del_salt' id='del_salt' class='form_qty' /> </li> </ol> </li> <li class='sub_2'> <input name='Repair' type='checkbox' id='checkbox_5' /> Repair</li> <li class='sub_2'> <input name='Move' type='checkbox' id='checkbox_6' /> Move Equipment</li> <li class='sub_2'> <input name='Hook_Up' type='checkbox' id='checkbox_7' /> Hook up Equipment</li> <li class='sub_2'> <input name='Disconnect' type='checkbox' id='checkbox_8' /> Disconnect Equipment</li> </ol> </li> <li class='sub_1'> <input name='Delivery' type='checkbox' id="checkbox_9" label="label" for='checkbox_9'/> Delivery (specify quantity) <ol> <li class='sub_2'> <input name='Water' type='checkbox' id='checkbox_10' /> Water (5-gal bottled) <input type="text" name='del_wat' id='del_wat' class='form_qty' /> </li> <li class='sub_2'> <input name='Salt' type='checkbox' id='checkbox_11' /> <label class='qty' for='del_salt'>Salt</label> <input type="text" name='del_salt' id='del_salt' class='form_qty' /> <ol> <li class='sub_3'> <input name='Salt' type='checkbox' id='filt_change' /> Change Filters </li> </ol> </li> <li class='sub_2'> <input name='Filt_deliver' type='checkbox' id='checkbox_12' /> <label class='qty' for='del_filt'>Filters</label> <input type="text" name='del_filt' id='del_filt' class='form_qty' /> </li> <li class='sub_2'> <input name='Parts' type='checkbox' id='checkbox_13' /> <label class='qty' for='del_parts'>Parts</label> <input type="text" name='del_parts' id='del_parts' class='form_qty' /> </li> <li class='sub_2'> <input name='Other_deliver' type='checkbox' id='checkbox_14' /> Other (please specify)** <input type="text" name='del_other' id='del_other' class='form_medium' /> </li> </ol> </li> <li class='sub_1'> <input name='Other_visit' type='checkbox' id="checkbox_15" label="label" for='checkbox_15'/> Other Visit (please specify)** <input type="text" name='visit_other' id='visit_other' class='form_medium' /> </li> </ol> </li> </ol> <ol>

< li class ='sub_2'>
< input name ='Water'type ='checkbox'id ='checkbox_10'/>
水（5加仑瓶装）
< input type =textname ='del_wat'id ='del_wat'class ='form_qty'/>
< / li>
< li class ='sub_2'>
< input name ='Salt'type ='checkbox'id ='checkbox_11'/>
< label class ='qty'for ='del_salt'>盐< / label>
< input type =textname ='del_salt'id ='del_salt'class ='form_qty'/>
< ol>
< li class ='sub_3'>
< input name ='Salt'type ='checkbox'id ='filt_change'/>
更改过滤器
< / li>
< / ol>
< / li>
< li class ='sub_2'>
< input name ='Filt_deliver'type ='checkbox'id ='checkbox_12'/>
< label class ='qty'for ='del_filt'>过滤器< / label>
< input type =textname ='del_filt'id ='del_filt'class ='form_qty'/>
< / li>
< li class ='sub_2'>
< input name ='Parts'type ='checkbox'id ='checkbox_13'/>
< label class ='qty'for ='del_parts'>零件< / label>
< input type =textname ='del_parts'id ='del_parts'class ='form_qty'/>
< / li>
< li class ='sub_2'>
< input name ='Other_deliver'type ='checkbox'id ='checkbox_14'/>
其他（请注明）**
< input type =textname ='del_other'id ='del_other'class ='form_medium'/>
< / li>
< / ol>
< / li>
< li class ='sub_1'>
< input name ='Other_visit'type ='checkbox'id =checkbox_15label =labelfor ='checkbox_15'/>
其他访问（请注明）**
< input type =textname ='visit_other'id ='visit_other'class ='form_medium'/>
< / li>
< / ol>
< / li>
< / ol>
< ol>

提前致谢！

解决方案

推荐答案

如果你删除了这一行，你的边框就会神奇地再次出现......

If you remove the line, your borders magically show up again...

编辑：我有一个想法，为什么，它只是无效的CSS - 你指定2宽度在这一行，并试图解释瘦作为边框风格...

i have an idea why, it's just invalid css - you specify 2 width's in this line, and IE tries to interpret thin as a border-style...

这篇关于输入边框显示在Chrome中，但不在IE中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！