0

次のコードが FireFox 3.6 で正しく動作しないのはなぜですか? IE7、IE8、および Chrome で問題なくテストしました。

問題:最初のブロック ホバー リンク(表の 3 行目) は、その下にある次のものと同じスタイル/効果を適用しません。

注:独自のテーブルフレームワークを作成しようとしています。このプロジェクトは、私が CSS についてさらに学ぶために行っているものです。始める前は、CSS についてよく知っていると思っていました。しかし、驚いたことに、私は間違っていました。誰かわかったね？先に進みます...補足として、IE6のサポートに時間をかけたくありません。したがって、IE6 に関連する問題が発生した場合は、時間を無駄にしないでください。この質問が完全なCSS/HTMLのストリップダウン/ベアボーンである場合、次のスタイルスクリプトと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 -->

追伸: もしあなたが手伝うことを選んだなら、アシスタントをありがとう。

4

1 に答える 1

1

私は少し前にこのような問題を抱えていました.アンカー要素内でブロックレベルの要素を使用することを想定していないため、通常は意味をなさない望ましくない効果を引き起こす可能性があります. 私はすべてを試しましたが、最終的な解決策は、すべてのブロック レベルの要素を削除し、標準に準拠した代替要素に置き換えることでした。

于 2010-03-13T21:37:30.273 に答える