为什么以下代码在FireFox 3.6中无法正常运行?我已经在IE7,IE8和Chrome中测试过没有任何问题。
问题:第一个块悬停链接(表格的第3行)不会应用与其下方相同的样式/效果。
注意:我正在尝试创建自己的表框架。我正在做的这个项目是为了更多地了解CSS。在我开始之前,我认为我对CSS了解很多。然而,令我惊讶的是我错了。谁知道?继续......作为旁注,我不想花时间来支持IE6。因此,如果您发现与IE6相关的问题,请不要浪费您的时间。另外还有一个注意事项,当这个问题是完整的CSS / HTML的精简/裸露时,会列出以下样式脚本和HTML。它应该足以帮助我。
/* 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;}
<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:如果您确实选择帮助,请感谢您的助手。
答案 0 :(得分:1)
我之前遇到过这样的问题,这只是因为你不应该在一个锚元素中使用块级元素,它会导致通常没有意义的不良影响。我尝试了一切,但最终解决方案只是删除所有块级元素,并用符合标准的替代方案替换它们。