Block Hover Effect - Почему он не работает правильно в FF3.6? - PullRequest
Новая
       15

Block Hover Effect - Почему он не работает правильно в FF3.6?

0 голосов
/ 14 марта 2010

Почему следующий код не работает правильно в FireFox 3.6? Я проверил в IE7, IE8 и Chrome без каких-либо проблем.

Проблема: Первая ссылка для наведения блока (3-я строка таблицы) не применяет тот же стиль / эффект, что и следующий ниже

Примечания: Я пытаюсь создать свою собственную таблицу Framework. Этот проект я делаю, чтобы узнать больше о CSS. Прежде чем начать, я думал, что много знаю о CSS. Однако, к моему удивлению, я ошибся. Кто знал? Двигаясь дальше ... Как примечание стороны, я не хочу тратить время на поддержку IE6. Итак, если вы видите проблему, связанную с IE6, пожалуйста, не тратьте свое время на рассказывание. Еще одно замечание, следующий сценарий стиля и HTML перечислены, когда этот вопрос является урезанным / непонятным для всего CSS / HTML. Этого должно быть достаточно, чтобы помочь мне.

CSS: 

/* Main Properties */
.ojtable{display:block;clear:both; margin-left:auto;margin-right:auto;
    margin-top:0px; width:650px;}

.ojtable-row, .ojtable-head
    {display:block;clear:both;position:relative;
    margin-left:0px;margin-right:0px;padding:0px;}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9,
.col-10, .col-11, .col-12, .col-13, .col-1-b1, .col-2-b1, .col-3-b1,
.col-4-b1, .col-5-b1, .col-6-b1, .col-7-b1, .col-8-b1, .col-9-b1, .col-10-b1,
.col-11-b1, .col-12-b1, .col-13-b1
    {display:block;float:left;position:relative;
    margin-left:0px;margin-right:0px;padding:0px 2px;}

/* Border */
.border-b1{border:solid #000000; border-width:0 0 1px 0;}
.border-ltr{border:solid #000000; border-width:1px 1px 0 1px;}
/* Header */
.ojtable-row{width:100%;}
.ojtable-head{width:100%;}
/* No Border*/
.col-2{width:96px;}
/* Border: 1px */
.col-2-b1{width:95px;}
.col-7-b1{width:345px;}    

/*--- Clear Floated Elements ---*/
/* Credit: http://sonspring.com/journal/clearing-floats */
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
/* Credit: http://perishablepress.com/press/2008/02/05/
    lessons-learned-concerning-the-clearfix-css-hack/ */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display:inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

/*--- Hover Effect for the Tables ---*/
a {text-decoration:none;}
.ojtable a .ojtable-row{width:650px; display:block; text-decoration:none;}
* html .ojtable a .ojtable-row {width:650px;}/* Hover Fix for IE */ 
.ojtable a:hover .ojtable-row{background:#AAAAAA; cursor:pointer;}

HTML: 

<div class="ojtable border-ltr clearfix">
    <div class="ojtable-row border-b1 clearfix"> 
        <div class="col-13">Newest Blogs</div>
    </div>
    <div class="ojtable-row border-b1 clearfix">
    <div class="col-7-b1 border-r1">Name</div> 
    <div class="col-4-b1 border-r1">Creater's Name</div> 
    <div class="col-2">Dated Created</div> 
    </div> 
    <a href="#"><div class="ojtable-row border-b1 clearfix">
    <div class="col-7-b1 border-r1">Why jQuery?</div> 
    <div class="col-4-b1 border-r1">Gramcracker</div> 
    <div class="col-2">Mar 11 2010</div> 
    </div></a>
    <a href="#"><div class="ojtable-row border-b1 clearfix">
    <div class="col-7-b1 border-r1">Thank You For Your Help</div> 
    <div class="col-4-b1 border-r1">O'Hater</div> 
    <div class="col-2">Nov 2 2009</div> 
    </div></a>
    <a href="#"><div class="ojtable-row border-b1 clearfix">
    <div class="col-7-b1 border-r1">Click Me! Hahaha!</div> 
    <div class="col-4-b1 border-r1">Brian Ojeda</div> 
    <div class="col-2">Nov 29 2008</div> 
    </div></a>
    <a href="#"><div class="ojtable-row border-b1 clearfix">
    <div class="col-7-b1 border-r1">Moment of Zen</div> 
    <div class="col-4-b1 border-r1">Jedi</div> 
    <div class="col-2">Mar 11 2010</div> 
    </div></a>
    <a href="#"><div class="ojtable-row border-b1 clearfix">
    <div class="col-7-b1 border-r1">I suck at CSS</div> 
    <div class="col-4-b1 border-r1">SGT OJ</div> 
    <div class="col-2">Mar 11 2010</div> 
    </div></a>
</div> <!-- End of Table -->

PS: Спасибо за помощь, если вы решите помочь.

1 Ответ

1 голос
/ 14 марта 2010

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

...