Skip to content

两道测试题

by 堂主 on 十月 23rd, 2009

阅读代码,指出其存在的兼容性问题,并给出相关解决方案。

第一题:

a img {
   display: none;
}
a:hover img {
   display:block;
}

<ol>
    <li><a href=”#nogo”><em>图片一</em><img src=”01.jpg” alt=”" /></a></li>
    <li><a href=”#nogo”><em>图片二</em><img src=”02.jpg” alt=”" /></a></li>
    <li><a href=”#nogo”><em>图片三</em><img src=”03.jpg” alt=”" /></a></li>
    <li><a href=”#nogo”><em>图片四</em><img src=”04.jpg” alt=”" /></a></li>
    <li><a href=”#nogo”><em>图片五</em><img src=”05.jpg” alt=”" /></a></li>
    <li><a href=”#nogo”><em>图片六</em><img src=”06.jpg” alt=”" /></a></li>
    <li><a href=”#nogo”><em>图片七</em><img src=”07.jpg” alt=”" /></a></li>
</ol>

第二题:

a img {
   display: none;
}
a:hover img {
   display:block;
   position: absolute;
}

<ol>
    <li><a href=”#nogo”><em>图片一</em><img src=”01.jpg” alt=”" /></a></li>
    <li><a href=”#nogo”><em>图片二</em><img src=”02.jpg” alt=”" /></a></li>
    <li><a href=”#nogo”><em>图片三</em><img src=”03.jpg” alt=”" /></a></li>
    <li><a href=”#nogo”><em>图片四</em><img src=”04.jpg” alt=”" /></a></li>
    <li><a href=”#nogo”><em>图片五</em><img src=”05.jpg” alt=”" /></a></li>
    <li><a href=”#nogo”><em>图片六</em><img src=”06.jpg” alt=”" /></a></li>
    <li><a href=”#nogo”><em>图片七</em><img src=”07.jpg” alt=”" /></a></li>
</ol>

From → 未分类

5 Comments
  1. ie6下a:hover的bug
    a:hover{}加个属性触发
    第二个a:hover增加position:relative。
    注意你的img的alt后的双引号,一个中文一个英文,a href里的引号是中文的!!!

    拖出去枪毙5分钟!

  2. wait permalink

    呃。。嗯。。学习了..

  3. @weilaixu:未来老大,那是字体的原因 这个是WP自身wptexturize 函数的问题…不是俺写错…

  4. @weilaixu:单、双引号显示的问题解决了。为WP安装“Quotmarks Replacer”插件即可

  5. 那个插件我发现也有问题,就是如果“中文english”的话,那么前面的是中文的引号,而后面的会是英文的。

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS