CSS border-right в Chrome

У меня есть следующий код, и по какой-либо причине в последней версии chrome border-right не исчезает, только если вы выделите столбец справа. просто скопируйте код, и вы увидите. Спасибо.CSS border-right в Chrome

<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

Вы даете ширину стола: 900px, и вы даете каждому человеку th в%. Попробуйте дать их также в px. – coder

Исправьте ваш doctype на '' .. нет, что не заставляет его работать, но вы не хотите, чтобы IE запускал режим quirks. – Adrift

Хорошо известно 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 */ 
}

Использование % (ячейки таблицы по умолчанию в %) Chrome играет, чтобы быть умным и использует какой-то half-pixel-precision, что приводит к тому, что пиксели перемещаются к следующему, оставляя известные s «артефакты», поэтому вам понадобится какая-то хакерская «перекраска».

Если вы используете строгий PX математику позиционирования вы также избавиться от «проблемы»
Кроме того, вы можете использовать box-shadow, чтобы получить 98% избавиться от этих недружественных линий.

, если бы я тебя, я хотел бы использовать прозрачные границы на начальном состоянии, поэтому никаких скачков не будет виден

источник

2013-02-26 03:11:56

Я пробовал ваше решение с '- webkit-transform: translate3d (0,0,0); и в моем автономном решении выглядит одинаково, даже если на [Yours Solution] (http://jsbin.com/iluqif/4/edit) выглядит хорошо. Затем я попытался добавить прозрачные границы в начальное состояние, и по какой-то причине я больше не вижу границы. Код можно просмотреть здесь [http://jsbin.com/iluqif/9/edit]. Спасибо. О 'box-shadow', я не уверен, как это использовать. – grenntrancer

@grenntrancer уверен, что они не появляются, потому что вы используете 'border-collapse;' :) –

ну, если я удалю это, это будет выглядеть очень уродливо, так что это точка отверстия .... :) и я дона 't действительно знаю, для какой проблемы вы говорите о 'border-collapse' ... – grenntrancer

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

@ Phil-Обновлено с новой демонстрацией – coder

CSS border-right в Chrome

ответ

Смежные вопросы