Question

我正在处理input text with image，我正在尝试将图像放在输入文本的右上角，而我的top定位似乎在不同的浏览器中有不同的输出。所以我有这样的HTML结构：

   <div class="bcb-box-left-content">
      <input type="text" name="skills" id="skills"/>
      <a href="#"><img src="assets/images/plus-in-box.png" alt=""/></a>
      <p>Maxiumum 3 skills for a guest account.</p>
   </div>

以下是这种风格：

   /*----the parent container-----------*/

  .bcb-box-left-content 
   { 
    max-width:444px;  
    margin-left:17px; 
    position:relative;
    margin-right:20px;}

   /**********the anchor *********/

   .bcb-box-left-content a
    {
    position: absolute;
    bottom: 0;
    right: 4px;
    top:5px;
    }

   /**********the input text *********/

   #skills { 
    width:100%;  padding: 10px 20px 10px 10px;
   }

所以现在有这样的方法（但不是字面上的代码本身）：

  /*in this case TOP for chrome*/
  -webkit-box-shadow: 0px 3px 3px 0px rgba(57,72,83,1); 

  /*in this case TOP for mozilla*/
    -moz-box-shadow: 0px 3px 3px 0px rgba(57,72,83,1);

  /*in this case TOP for normal*/
    box-shadow: 0px 3px 3px 0px rgba(57,72,83,1);

样本：

http://jsfiddle.net/leonardeveloper/Wm4ML/

Answer 1

将margin和默认border属性应用于#skills课程。它将在您提到的所有浏览器上提供相同的结果。像下面一样更新你的CSS。

 #skills 
 { 
    width:100%;
    padding: 10px 0px 10px 10px; 
    margin:0; 
    border:1px solid #ccc;  
 }

DEMO

在不同浏览器中的顶级定位

1 个答案: