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

回答

相關問題