Safari Button has square corners if the text grows longer
The context is in a Mac's Safari.
I'm creating a HTML button that has dynamic content. It can be "OK" "Cancel" or "I will come back later" depending on the scenario. The max-width property is set to 100px so that it does not grow too long and mess-up the layout. Whenever the button text is longer, the button loses its rounded corners. I've also discovered that the button loses its default style if its style is overridden开发者_如何学Go by CSS... I just the need the button to behave as it is and accommodate the text without losing the rounded corners. Can anyone help me?
thanks in advance!
Added Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Button</title>
<style>
button{max-width:150px;}
</style>
</head>
<body>
<button id="test">Button has a long text to test its capacity</button>
</body>
</html>
Option 1: Update your Safari. I copy/pasted your exact code into a page and opened in Safari (just downloaded), and it has rounded corners. I also tried increasing the max-width to 300px, and it still works just fine - rounded corners and all.
Option 2: Create buttons with rounded corners using HTML/CSS. THIS SITE is perfect for this - it lets you pick your options, then download the HTML/CSS for the exact button(s) you want - and it's free. Of course you can then tweak the options yourself, or write it by hand, but - it's a good starting place if you've not made rounded buttons before.
加载中,请稍侯......
精彩评论