边界半径与背景无法正常工作

Question

我在Android 2.x浏览器上设置了webview。我希望我的按钮有border-radius和background-color。我在CSS中为这两个值指定了这些值，但是，它不起作用。

当我单独设置值时，它会起作用。

任何想法，当我一次指定所有值时，为什么它不起作用？

HTML

<button class="btn">click</button>

CSS

.btn{/*border radius does not work*/
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius: 12px; 
    background-color:green;
}

.btn{/*works*/
    border-radius:12px;
}

.btn{/*works*/
    background-color:green;
}

Answer 1

尝试包含overflow hidden和display：block

溢出：隐藏; display：block

Answer 2

这应该适用于从CSS-tricks上提到的1.6开始的任何Android。

＆＃13;

＆＃13;

button{
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px; 
    border-radius: 12px; 
    background-color:green;
}

＆＃13;

<button>click</button>

＆＃13;

＆＃13;

＆＃13;

在HTM5L和CSS3中设计按钮的另一个选择是使用a标签。像这样：

＆＃13;

＆＃13;

a{
  background-color:green;
  text-decoration:none;
  -webkit-border-radius:12px; 
  -moz-border-radius:12px; 
  border-radius:12px;
  color:black;
  padding:5px;
  cursor:pointer;
}

＆＃13;

<a href="/" alt="">click</a>

＆＃13;

＆＃13;

＆＃13;

或者，您可以尝试使用<input>或type="button"的{​​{1}}标记。阅读更多here。像这样：

＆＃13;

＆＃13;

type="submit"

＆＃13;

input{
  background-color:green;
  -webkit-border-radius:12px;
  -moz-border-radius:12px; 
  border-radius:12px;
}

＆＃13;

＆＃13;

＆＃13;

如果这些方法中的任何一个对您不起作用，那么其他CSS或JavaScript设置很可能会导致此问题。而且，您需要在问题中包含其他代码。