Fatal编程技术网
  • html/
  • Html 输入边框显示在Chrome中，但不显示在IE中

Html 输入边框显示在Chrome中，但不显示在IE中

html css internet-explorer google-chrome

Html 输入边框显示在Chrome中，但不显示在IE中,html,css,internet-explorer,google-chrome,Html,Css,Internet Explorer,Google Chrome,我正在创建一个web表单，我发现了一个奇怪的小错误或其他东西：当我添加到文本输入字段中的边框和背景样式在Chrome中工作时，我在IE8或IE9中什么也得不到。在中，没有边界或背景。要查看它，您甚至不知道输入字段的存在，除非您点击tab或设法在正确的位置单击，因为focus属性工作得很好 我看到过几个问题与此相反——border在IE中工作，但在Chrome中不工作——但在这个问题上不工作。我尝试过border:default，我尝试过真正的深色背景，我尝试过删除css中的整个类，我的输入字段在

我正在创建一个web表单，我发现了一个奇怪的小错误或其他东西：当我添加到文本输入字段中的边框和背景样式在Chrome中工作时，我在IE8或IE9中什么也得不到。在中，没有边界或背景。要查看它，您甚至不知道输入字段的存在，除非您点击tab或设法在正确的位置单击，因为focus属性工作得很好

我看到过几个问题与此相反——border在IE中工作，但在Chrome中不工作——但在这个问题上不工作。我尝试过border:default，我尝试过真正的深色背景，我尝试过删除css中的整个类，我的输入字段在IE中仍然是不可见的，除非它们被聚焦

以下是我的CSS的部分内容（完全没有相关的部分）：

下面是相关的HTML（这是一个相当长的表单）：

名称/公司*



地址



城市*



电话*



电子邮件


请选择所有适用的选项：


  • 
问题:**

  • 

    • 


  • 
访问（选择类型，所有适用项）：

  • 
服务

  • 
更换过滤器

  • 
送盐

    • 


  • 
修理
    • 

  • 
移动设备
    • 

  • 
连接设备
    • 

  • 
断开设备
    • 


  • 
交货（指定数量）

  • 
水（5加仑瓶装）

    • 

  • 
盐

  • 
更换过滤器

    • 


  • 
过滤器

    • 

  • 
部分

    • 

  • 
其他（请具体说明）**

    • 


  • 
其他访问（请说明）**

    •
    提前谢谢

    看起来您正在使用inset，这取决于边框颜色属性。所以把它们分成边框颜色：颜色；边框样式：插图；如果它只是一个实线、虚线、虚线等属性，而不是像您那样对其进行单个标记。值得一试。

    非常肯定
    li输入[checkbox]，输入[text]
    不是您想要的。 尝试
    li输入[type=“checkbox”]，改为li输入[type=“text”]

    另外，请确保在类型选择器周围使用双引号。

    这是由
    边框：1px thin#99ccff-出于某种原因（我不知道为什么），IE将其解释为
    边框样式：无
    
如果你移开这条线，你的边界就会神奇地再次出现
    

    编辑：我有一个想法，为什么它是无效的css-你在这行中指定了2个宽度，IE试图将
    thin
    解释为边框样式…
    只是在
    输入[type='text']、输入[type='tel']、输入[type='email']
    中将
    border
    更改为
    border width
    。检查它。
    您能创建一个重现此问题的示例，并且不需要阅读大量代码吗？很好的一点，验证器可能会发现更多的问题，而不仅仅是一些跨浏览器兼容性的小边界问题。我相信你是对的。不过，它似乎确实解决了IE中的问题。

    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;
}

    

    <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. jack@example.net'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>