2

我对下面脚本（也位于http://jsbin.com/enOxEya/1/）的意图只是删除右边框。

然而，对于 FF、Chrome 和 IE，它会使左边框和上边框变粗。

此外，对于 FF，它会移除底部边框，而对于 Chrome 和 IE，它会隐藏底部边框。

查看每个浏览器的图像（所有浏览器都是最新的）

FF 的结果

FF 的结果

来自 Chrome 的结果

来自 Chrome 的结果

来自 IE 的结果

来自 IE 的结果

仅对顶部、底部和左侧边框使用无边框样式也会对所有浏览器产生意想不到的结果。

如何在不影响其他三个边框的情况下删除单个边框（即右侧边框）？

<!DOCTYPE html>
<html>
    <head>
        <title>Boarders</title>
        <style type='text/css'>
            #input2 {border-right-style:none}
        </style>
    </head>
    <body>
        <input id="input1" />
        <br />
        <br />
        <input id="input2" />
    </body>
</html>
4

2 回答 2

5

试试这个，效果很好

只需更换

<style type='text/css'>
            #input2 {border-right-style:none}
        </style>

有了这个

<style type='text/css'>
            #input2 {border-style: solid none solid solid}
        </style>

希望这可以帮助你。

于 2013-09-22T15:14:20.130 回答
1

尝试这个：

演示

<!DOCTYPE html>
<html>
<head>
<title>Boarders</title>
<style type='text/css'>
#input2 {
    border: 1px solid #ABADB3;
    border-right: 0;
}
</style>
</head>
<body>
<input id="input1" />
<br />
<br />
<input id="input2" />
</body>
</html>
于 2013-09-22T15:16:33.420 回答