Question

我正在尝试为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>

Answer 1

它实际上发生在所有浏览器中，如果你调整它们的大小（减小宽度。你很可能让你的浏览器有不同的大小，因为有些更宽，问题不显示）。

问题是您假设您的图像与输入字段在同一行。如果有足够的空间，它恰好在同一条线上。如果宽度不够，它将换行到下一行。

解决方案是在输入元素和position:relative图像周围放置一个包装元素，并使用position:absolute将图像放在正确的位置。

http://jsfiddle.net/gaby/q93sC/

演示

发布代码更改以避免与jsfiddle混淆..

<强> 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，类with-icon ）

<div class="with-icon">
     <input type="text" name="name" value="" id="name"/>
    <img class="searchGlass" src="http://lorempixel.com/20/20/abstract/5" alt="search glass" />
</div>

Answer 2

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

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

http://jsfiddle.net/lahmf/4hhrt/3/

FF中的3D效果按钮问题

2 个答案: