Question

我有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中运行，但在google Chrome中，只要验证触发输入框获得css在javascript中应用，但它也会创建1px实体的顶部和底部边框

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

Answer 1

如果我了解您的问题，顶部和底部边框也会变为红色（在Chrome中）。你提到它们是1px实体，但这是你最初在你的CSS中设置它们，所以我认为真正的问题不是有一个坚实的1px边框，而是它是错误的颜色。因此，我假设当您只想要左边框时，它们会从#CCCCCC更改为red。

我怀疑border-radius（或事后的渲染）可能是问题所在。如果您尝试不使用border-radius，问题仍然存在（我无法访问Chrome来测试自己）吗？如果这解决了，那就是问题所在。您可以尝试通过更明确的方式来克服它：

function validate()
    {
         var el = document.getElementById('txt1');
         if (el.value == '') {
            el.style.borderLeft = "5px solid red";
            el.style.borderTopColor = "#CCCCCC";
            el.style.borderBottomColor = "#CCCCCC";

            return false;
        }
    }

编辑：根据UnLoCo的信息，无论是在他的第一条评论以及他在你的问题中的评论，你都可以尝试不使用速记css，看看是否能解决它。所以代替你的css：

border: 1px solid #CCCCCC;

您可以在基本css中尝试此操作，看看明确设置每个边框是否允许Chrome在更改左边框时不会覆盖其他边框：

border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;

Answer 2

这是一个已知错误，已报告：https://bugs.webkit.org/show_bug.cgi?id=72120。

但是，这是针对您的案例的解决方法：

将所有3px的半径调整为3px / 1px。虽然它不完美但不知何故可以接受。

演示：http://jsfiddle.net/linmic/VFBT3/51/

Google Chrome中与Border-Radius相关的问题

2 个答案: