Question

适用于Chrome但不适用于Firefox。我知道还有其他问题但是现在我只想弄清楚为什么箭头在chrome中居中而不是在Firefox中。我尝试添加text-align：center但似乎没有效果。

<div id='word_list_wrper'>
<table id='user_word_table'>
    <tr>
        <td>1.</td>
        <td>item</td>                            
        <td>
            <div id="editBtns">
                <button id="removeBtn">x</button>
                <div id="upDownBtns">
                    <button>&#8593;</button>
                    <button>&#8595;</button>
                </div>
            </div>
        </td>
    </tr>
</table>


#word_list_wrper table{
    width:228px;
}

#word_list_wrper table td:first-child,
#word_list_wrper table td:last-child
{
   width:20px;
}

#word_list_wrper table td{
    text-align:left;
    padding:2px 5px;
    vertical-align:middle;  
}

#editBtns{
  margin:0;
  width:46px;
  height:22px;

}
#removeBtn{
  width:23px;
  height:22px;
  margin:0;
  float:left;
  color:red;
}
#upDownBtns{
  float:left;
   height:20px;
   width:22px;
}
#upDownBtns button{
   margin:0;
   padding:0px 0px 2px 0px;
   width:11px;
   height:22px;
}

Answer 1

尝试添加：

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

Answer 2

您已在button元素上设置了宽度，可能是基于对箭头字符宽度要求的猜测。只需删除width:11px，让浏览器根据他们有关字符（字形）的信息进行格式化。

html实体没有居中于firefox中的按钮

2 个答案: