Chrome中的CSS border-right

我有以下代码，并且出于某种原因，在最后一个版本的chrome中，边界不会消失，只有当您突出显示右侧的列时。只需复制代码即可看到。谢谢。Chrome中的CSS border-right

<DOCTYPE! html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Highlighting</title> 
<style type="text/css"> 
body { 
background-color: rgba(0,0,0,1); 
} 
#decor-table { 
    font-family: Calibri, "Times New Roman", Arial; 
    font-size: 13px; 
    text-align: left; 
    border-collapse: collapse; 
} 
#decor-table th { 
    font-size: 14px; 
    padding: 10px 10px; 
    color: rgba(153,153,153,1); 
    text-transform: uppercase; 
} 
#decor-table td { 
    padding: 3px 10px; 
    color: #369; 
    vertical-align: middle; 
} 
#oce-first { 
    font-weight: bold !important; 
    background-color: rgba(204,204,204,0.2); 
    border-bottom: 1px solid rgba(204,204,204,0.5); 
} 
.hover_class { 
    color: rgba(225,225,225,1) !important; 
    background: rgba(204,204,204,0.2); 
    border-left: 1px solid rgba(204,204,204,0.5); 
    border-right: 1px solid rgba(204,204,204,0.5); 

} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() 
    { 
    var cellClassName = false; 
    $("td, th").hover 
    (
     function() 
     { 
      cellClassName = $(this).attr("class"); 
      $("." + cellClassName).addClass("hover_class"); 
     }, 
     function() 
     { 
      $("." + cellClassName).removeClass("hover_class"); 
     } 
); 
    }); 
</script> 
</head> 
<body> 
<table width="900px" id="decor-table"> 
    <thead> 
    <tr id="oce-first"> 
     <th width="17%" class="col1">test</th> 
     <th width="18%" class="col2">test</th> 
     <th width="13%" class="col3">test</th> 
     <th width="11%" class="col4">test</th> 
     <th class="col5">test</th> 
     <th width="16%" class="col6">test</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td class="col1">test</td> 
     <td class="col2">test</td> 
     <td class="col3">test</td> 
     <td class="col4">test</td> 
     <td class="col5">test</td> 
     <td class="col6">test</td> 
    </tr> 
    <tr> 
     <td class="col1">test</td> 
     <td class="col2">test</td> 
     <td class="col3">test</td> 
     <td class="col4">test</td> 
     <td class="col5">test</td> 
     <td class="col6">test</td> 
    </tr> 
    <tr> 
     <td class="col1">test</td> 
     <td class="col2">test</td> 
     <td class="col3">test</td> 
     <td class="col4">test</td> 
     <td class="col5">test</td> 
     <td class="col6">test</td> 
    </tr> 
    <tr> 
     <td class="col1">test</td> 
     <td class="col2">test</td> 
     <td class="col3">test</td> 
     <td class="col4">test</td> 
     <td class="col5">test</td> 
     <td class="col6">test</td> 
    </tr> 
    <tr> 
     <td class="col1">test</td> 
     <td class="col2">test</td> 
     <td class="col3">test</td> 
     <td class="col4">test</td> 
     <td class="col5">test</td> 
     <td class="col6">test</td> 
    </tr> 
    <tr> 
     <td class="col1">test</td> 
     <td class="col2">test</td> 
     <td class="col3"></td> 
     <td class="col4"></td> 
     <td class="col5">test</td> 
     <td class="col6"></td> 
    </tr> 
    <tr> 
     <td class="col1">test</td> 
     <td class="col2"></td> 
     <td class="col3"></td> 
     <td class="col4"></td> 
     <td class="col5">test</td> 
     <td class="col6"></td> 
    </tr> 
    <tr> 
     <td class="col1"></td> 
     <td class="col2"></td> 
     <td class="col3"></td> 
     <td class="col4"></td> 
     <td class="col5">test</td> 
     <td class="col6"></td> 
    </tr> 
    </tbody> 
</table> 
</body>

来源

2013-02-26 grenntrancer

不要让人复制/粘贴代码。 http://jsfiddle.net/Auqcz/ – Phil 2013-02-26 03:07:33

你给表格宽度：900px，你给每个单独的百分比。尝试给他们也px – coder 2013-02-26 03:10:39

修复你的文档类型为'<！DOCTYPE html>'..不，这不会使它的工作，但你不想让IE触发怪癖模式.. – Adrift 2013-02-26 03:11:48

知名Chrome artifacts

LIVE DEMO

.hover_class { 
    color: rgba(225,225,225,1) !important; 
    background-color: rgba(204,204,204,0.2); 
    border-left: 1px solid rgba(204,204,204,0.5); 
    border-right: 1px solid rgba(204,204,204,0.5); 

    -webkit-transform: translate3d(0,0,0); /* THIS WILL FIX IT */ 
}

使用%（表格单元格中默认%）铬起着很聪明，并使用某种half-pixel-precision，即导致像素行进到下一个，留下已知的a所以你需要一些黑客的“重新绘画”。

如果您使用严格PX数学的定位也将摆脱“问题”
此外，您可以使用box-shadow获得98％摆脱这种不友好线的。

如果我是你，我会用在初始状态下是透明边框，所以没有跳跃将是可见的

来源

2013-02-26 03:11:56

我试着你的解决方案' webkit-transform：translate3d（0,0,0）;'和我的离线解决方案看起来一样，即使在[你的解决方案]（http://jsbin.com/iluqif/4/edit）看起来不错。然后，我试图在初始状态添加透明边框，并且出于某种原因，我再也看不到边框了。代码可以查看[Here]（http://jsbin.com/iluqif/9/edit）。谢谢。关于'box-shadow'，我不太确定如何使用它。 – grenntrancer 2013-02-26 14:14:55

@ grenntrancer确定他们没有出现，因为你使用'border-collapse;':) – 2013-02-26 18:29:52

好吧，如果我删除它，它会看起来非常丑陋，所以这是洞点.... :)，我不'真的不知道你说的是什么问题'边界崩溃'... – grenntrancer 2013-02-26 23:39:34

Updated DEMO

我认为这个问题是与你的table width为您提供他们与px值和给出th％，所以我已完全改变为％如图所示

<tr id="oce-first"> 
    <th width="20%" class="col1">test</th> 
    <th width="20%" class="col2">test</th> 
    <th width="20%" class="col3">test</th> 
    <th width="14%" class="col4">test</th> 
    <th width="16%" class="col5">test</th> 
    <th width="10%" class="col6">test</th> 
</tr>

来源

2013-02-26 03:17:54 coder

我仍然看到持续的边界每隔不时和你的演示 – Phil 2013-02-26 03:21:13

@菲尔 - 更新与新演示 – coder 2013-02-26 03:41:21

Chrome中的CSS border-right

回答

相关问题