造型按钮

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

我有一个按钮可以在hover上更改它的风格。它在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;
}

Answer 2

jsFiddle

您还可以制作::before或::after absolute以防止出现任何问题。您还可以将它放在任何您想要的位置。

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

:hover::before {
    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;
    border: none;
    cursor: pointer;
}
button[type=submit]::before {
    overflow:hidden;
    position:absolute;
    left: 30px;
    top; 5px;
}