与 google Chrome for Border-Radius 相关的问题答案

【问题标题】：Issue related to google Chrome for Border-Radius与 google Chrome for Border-Radius 相关的问题
【发布时间】：2012-01-04 17:22:49
【问题描述】：

我有以下 CSS 类

form input[type="text"], form input[type="email"], form input[type="password"], form select, form textarea {
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    padding: 2px 0;
}

以及以下 html 和 Java Script：

<input type="text" id="txt1" style="width:300px;" />
    <input type="button" id="btn" value="click here" class="medium required" onclick="return validate();"/>

<script language="javascript">
    function validate()
    {
         if (document.getElementById('txt1').value == '') {

            document.getElementById('txt1').style.borderLeft = "5px solid red";

            return false;
        }


    }
</script>

它在 Mozila 中工作，但在谷歌 Chrome 中，只要验证触发输入框就会在 javascript 中完全应用 css，但它也会创建 1px 实心的顶部和底部边框

您可以在以下位置查看此示例：http://jsfiddle.net/unloco/VFBT3/3/

我该如何解决这个问题？谢谢。

【问题讨论】：

这很奇怪。最小示例：jsfiddle.net/VFBT3/13 另一个更最小的示例：jsfiddle.net/VFBT3/14
很奇怪 - 你肯定发现了一个错误。您可以通过更改输入的宽度或边框宽度使其消失（例如，尝试“8px solid red”而不是 5）。

标签： html css google-chrome

【解决方案1】：

似乎是 border-radius: 3px 3px 3px 3px; 和 -webkit-border-radius: 3px 3px 3px 3px; 的错误如果你从 CSS 中删除它，那么 Chrome 就没有问题

cf - http://jsfiddle.net/VFBT3/20/

【讨论】：

【解决方案2】：

是的，您似乎发现了一些错误。但是您也可以这样做： http://jsfiddle.net/VFBT3/46/

CSS

form input[type="text"], form input[type="email"], form input[type="password"], form       select, form textarea {border: none;height: 20px;vertical-align: top;}
    div{width: 305px;height: 20px;border: 1px solid #CCC;
    border-radius: 3px;}
    *{margin:0;padding:0;}

HTML：

<form style="margin: 20px;">
     <div>
<input type="text" id="txt1" style="width:300px;" />
   </div>
<input type="button" id="btn" value="click here" class="medium required" onclick="return validate();"/>

</form>

JS 会一样。

【讨论】：