Question

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

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

此外，对于FF，它会移除底部边框，对于Chrome和IE，它会遮挡底部边框。

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

FF的结果

Results from FF

Chrome的结果

Results from Chrome

IE的结果

Results from IE

对于顶部，底部和左侧边框使用border style none也会为所有浏览器产生意外结果。

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

<!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>

Answer 1

试试这个，它运作正常

只需替换

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

用这个

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

希望这会对你有所帮助。

Answer 2

试试这个：

DEMO

<!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>

仅删除输入元素上的一个边框，而不影响其他边框

2 个答案: