Html FF中的3D效果按钮问题

我正在尝试设计一个html表单的样式，大多数情况下它看起来很棒，但是表单中的一些字段有一个3-d类型的按钮，你按下它，它看起来像是被按下了。IE和Chrome的工作方式很有魅力，但FF如何将表单中的其他字段向下推。有人能给我解释一下那里发生了什么事吗

以下是我的html标记：

 <form action="">
      <label for="name">Name: </label>
      <input type="text" name="name" value="" id="name"/>
      <img class="searchGlass" src="searchGlass.jpg" alt="search glass">
      <label for="email">Email: </label>
      <input type="text" name="email" value="" id="email"/>
      <label for="phone">Phone: </label>
      <input type="text" name="phone" value="" id="phone"/>
      <label for="message">Message: </label>
      <textarea type="text" name="message" value="" id="message" rows="10" cols="10"></textarea>
      <input type="submit" name="submit" value="Submit"/>
 </form>

姓名：
电邮：
电话：
信息：

以下是我的风格：

 <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic' rel='stylesheet' type='text/css'>
 <style>
      label {
           display: block;
           font-family: 'Open Sans', sans-serif;
           font-size: 13px;
           color: #4d5357;               
      }

      input[type=text], textarea {
           width: 452px;
           height: 20px;
           border: 1px solid #a6a9ab;
           color: #4d5357;
           font-size: 13px;
           padding: 5px 0 5px 5px;
           font-family: 'Open Sans', sans-serif;
      }
      textarea {
           height: 212px;
      }
      img.searchGlass {
           position: relative;
           top: 8px;
           left: -35px;
           border: 1px solid #a6a9ab;
           border-bottom: 3px solid #a6a9ab;
      }
      img.searchGlass:active {
           position: relative;
           top: 8px;
           left: -35px;
           border: 1px solid #a6a9ab;
           border-bottom: none;
           margin-top: 3px;
      }

 </style>

标签{
显示：块；
字体系列：“开放式Sans”，无衬线；
字体大小：13px；
颜色：#4d5357；
}
输入[类型=文本]，文本区域{
宽度：452px；
高度：20px；
边框：1px实心#a6a9ab；
颜色：#4d5357；
字体大小：13px；
填充：5px 0 5px 5px；
字体系列：“开放式Sans”，无衬线；
}
文本区{
身高：212px；
}
探照镜{
位置：相对位置；
顶部：8px；
左：-35px；
边框：1px实心#a6a9ab；
边框底部：3px实心#a6a9ab；
}
img.searchGlass：激活{
位置：相对位置；
顶部：8px；
左：-35px；
边框：1px实心#a6a9ab；
边框底部：无；
利润上限：3倍；
}

如果缩小浏览器的大小（减小宽度，很可能浏览器的大小不同，而且由于一些浏览器的宽度更大，所以问题不会出现）

问题是，您假设图像与输入字段位于同一行。只有在有足够空间的情况下，它才碰巧在同一条线上。如果宽度不够，它将换行到下一行

解决方案是在输入元素和图像周围放置一个包装器元素，该图像是

位置：相对的

，并使用

位置：绝对的

将图像放置在正确的位置

演示

---

发布代码更改以避免来自JSFIDLE的混淆

CSS

 img.searchGlass {
       position: absolute; /*changed this to absolute*/
       top: 4px;
       right: 5px;
       border: 1px solid #a6a9ab;
       border-bottom: 3px solid #a6a9ab;
 }
 img.searchGlass:active { /*simplified this rule as only changed properties need to be defined*/
       border-bottom: none;
       margin-top: 3px;
 }
 .with-icon{ /*Added this rule*/
        position:relative;
        display:inline-block;
  }

和HTML（将

input

和

img

包装在

div

中，并带有类

和图标

）

---

现在你的工作对我来说很好。诀窍是给图像一个绝对位置，而不是相对位置，否则当你点击它并弹出效果时，图像将显示在其他地方

    img.searchGlass {
       position: absolute;
       top: 8px;
       left: 480px;
       border: 1px solid #a6a9ab;
       border-bottom: 3px solid #a6a9ab;
  }
  img.searchGlass:active {
       position: absolute;
       top: 8px;
       left: 480px;
       border: 1px solid #a6a9ab;
       border-bottom: none;
       margin-top: 3px;
  }

---

我无法重现您描述的内容。在铬和ff中表现相同。IE未测试请提供一个工作样本，以便我们发现错误。工作正常@哈米德蒙尼我弄明白了他的意思。在firefox中，当你按下图片时，一些文本框也会下降一点。有什么好的解决方法吗？我认为每一行都有足够的空间来容纳输入元素和img，所有浏览器都是全屏的，表单元素不受宽度参数的限制。您可以发布影响布局的

img

的尺寸吗。。另外，我刚刚发布了一个解决方案的演示，我建议将其付诸实施。该图像的宽度为26px，高度为22px，先生，您能详细说明为什么这个div使子输入元素保持不变吗？这个边距是从哪里来的，我指的是当我按下图像时推动输入元素的边距？我明白了，你为什么要这样做。但是仍然很难理解为什么最初的问题会发生，顺便说一句，谢谢你的帮助help@RustamIssabekov对于我使用的

div

，我还在CSS

的末尾创建了一个CSS规则，带有图标{position:relative；display:inline block；}

这是使图像相对于容器保持绝对位置的原因。。

    img.searchGlass {
       position: absolute;
       top: 8px;
       left: 480px;
       border: 1px solid #a6a9ab;
       border-bottom: 3px solid #a6a9ab;
  }
  img.searchGlass:active {
       position: absolute;
       top: 8px;
       left: 480px;
       border: 1px solid #a6a9ab;
       border-bottom: none;
       margin-top: 3px;
  }