Although Safari 3 tends to render layouts the same as the other leading popular browsers, it prefers to use it’s “aqua” button styling for standard sized form buttons.
One solution for this is to set a dimension (width or height) to the button.
To target Safari 3 in CSS you can use the following to add or override any existing attributes, such as the height of a button:
@media screen and (-webkit-min-device-pixel-ratio:0) { button { height: 40px; } }
If required, multiple selectors can be added into a single block.
Just in case, here’s also a way to target Opera. The first declaration hits Safari as well so you need to go back and reset Safari. There have been a few times that I needed to hit just Opera and this solves it.
/* Opera and Safari */
@media all and (min-width: 0px) {
#id { background: #99e; }
}
/* Reset Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#id { background: #ede; }
}