html - 设计一个按钮

Question

http://jsfiddle.net/eS7bC/5/

button[type=submit] {
    width: 101px; height: 16px;
    background-color: #f68830;
    -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px;
    border: none; 
    cursor:pointer;
}

button[type=submit]:hover::after {
    content:'';
    background-color: #f68830;
    width:6px; height:6px;
    -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
    vertical-align:middle;
    float: right;
    background-color: #d9e4ea;
    margin: 0; padding: 0;
}

我有一个按钮，可以在悬停 时改变它的样式。它在 Chrome 上工作并且看起来很好，但在其他浏览器中存在问题。在 Firefox 上，hover 上出现的点有点不合适，当您将鼠标悬停或单击时，按钮会移动。 IE 与 Firefox 有类似的问题。问题是如何设置它的样式以使其在所有浏览器中的行为和外观都相同？

Answer 1

这是因为 float:right 属性。试试这个

button[type=submit] {
    width: 101px; height: 16px;
    background-color: #f68830;
    webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px;
    border: none; 
    cursor:pointer;
    margin: 0; padding: 0;
    position: relative;
}

button[type=submit]:hover::after {
    content:'';
    background-color: #f68830;
    width:6px; height:6px;
    webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
    position: absolute;
    right: 6px;
    top: 5px;
    background-color: #d9e4ea;
    margin: 0; padding: 0;
}