td границы были скрыты за tr цвет фона в IE8

Я пишу веб-страницу, содержащую таблицу, при просмотре с использованием любого браузера, отличного от IE8, для каждой ячейки применяется белая рамка; но при просмотре в IE8 граница скрыта за цветом фона строки.td границы были скрыты за tr цвет фона в IE8

(Даже IE9 не имеет никаких проблем с указанием белые границы, и у меня не было более ранние версии IE, чтобы примерить.)

Любая идея, почему?

HTML выглядит следующим образом:

<html> 
    <head></head> 
    <form> 
    <body> 
     <div id="selectFullTextTableDiv"> 
     <table> 
      <tr id="oddRow"> 
      <td id="cellCheckBox"><input name="pid[]" type="checkbox" value="itemOne"></td> 
      <td id="itemName">item 1</td> 
      </tr> 
      <tr id="evenRow"> 
      <td id="cellCheckBox"><input name="pid[]" type="checkbox" value="itemTwo"></td> 
      <td id="itemName">item 2</td> 
      </tr> 
     </table> 
     </div> 
    </body> 
    </form> 
</html>

И CSS выглядит следующим образом:

#selectFullTextTableDiv { position:relative; 
    top:0px; 
    left:0px; 
    } 

#selectFullTextTable { width: 650px; 
    float:left; 
    position:relative; 
    top:0px; 
    left:0px; 
    margin: 30px 0 0 10px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:14px; 
    border-spacing:0px; 
    border-collapse:separate; 
    } 

#selectFullTextTable tr { position:relative; 
     top:0px; 
     left:0px; 
     } 


#selectFullTextTable td { position:relative; 
    top:0px; 
    left:0px; 
    height:auto; 
    vertical-align:middle; 
    padding: 10px 5px 10px 5px; 
    border-bottom: 2px #FFFFFF solid; 
    border-top: 2px #FFFFFF solid; 
    } 

#oddRow { background-color:#CCCCCC; 
     } 

#evenRow { background-color:#FFCC33; 
      } 

#cellCheckBox { text-align:center; 
    position:relative; 
    top:0px; 
    left:0px; 
    -webkit-border-radius:6px 0px 0px 6px; 
    -moz-border-radius:6px 0px 0px 6px; 
    border-radius: 6px 0px 0px 6px; 
    behavior: url(/CSS3PIE/PIE.htc); 
    } 

#itemName { margin:2px; 
    position:relative; 
    top:0px; 
    left:0px; 
    text-align:left; 
    display:table-cell; 
    -webkit-border-radius:0px 6px 6px 0px; 
    -moz-border-radius:0px 6px 6px 0px; 
    border-radius: 0px 6px 6px 0px; 
    behavior: url(/CSS3PIE/PIE.htc); 
    }

Кто-нибудь видит, где проблема? Было бы признательно, если вы скажете мне, где я совершил ошибку (-ы).

Спасибо!

источник

2013-09-12 111 ooo

Не могли бы вы создать jsfiddle, который воспроизводит это? – yochannah

Я проверяю ваш код. и первое, что походит на мои глаза, заключается в том, что вы вложили body в form. это должно быть наоборот.

Изменить это:

<html> 
    <head></head> 
    <form> 
    <body> 
    .. 
    </body> 
    </form> 
</html>

Для этого:

<html> 
    <head></head> 
    <body> 
     <form> 
     .. 
     </form> 
    </body> 
</html>

Во-вторых: закрыть input теги.

Изменить это:

<input name="pid[]" type="checkbox" value="itemOne"> 
<input name="pid[]" type="checkbox" value="itemTwo">

Для этого:

<input name="pid[]" type="checkbox" value="itemOne" /> 
<input name="pid[]" type="checkbox" value="itemTwo" />

Третье: ID должен быть уникальным. У вас есть несколько элементов с идентификатором. (cellCheckBox, itemName) Я предлагаю вам изменить их на класс и соответственно изменить свой CSS.

проверьте и сообщите об этом. Если проблема все еще остается, я буду исследовать ее дальше.

источник

2013-09-12 11:47:31 avrahamcool

td границы были скрыты за tr цвет фона в IE8

ответ

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