javascript - 谷歌浏览器中与 Border-Radius 相关的问题

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 脚本:

<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 中有效，但在谷歌浏览器中，只要验证触发，输入框就会在 javascript 中完全应用 css，但它还会创建 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;