点击链接有虚线的处理办法

wordpress论坛上,fangyd对sunshine主题提出了一个页面的不足之处,

sunshinebug

在此表示感谢,并写出解决办法:

BUG产生原因:
在默认情况下,链接被点击时,会产生一个虚线框作为提示让用户明确当前关注的东西。但是sunshine主题中,已经给了链接被点击后的状态,用户点击的时候,浏览器会再给一次,这样重复叠加,产生了虚框的问题。

解决方案:
1.For IE浏览器:在HTML标签中加上hidefocus=”true” 属性即可

<a id="commenttab" hidefocus="true"/>评论</a>

2.For Firefox:a:focus{outline:none}

#cmtswitcher a:focus{outline:none}

大家可以下载sunshine1.4版本,替换掉style.css文件和comments.php,完成修复。

相关日志:

8 条评论 《点击链接有虚线的处理办法》

  1. [...] 1.4 ( 2009/01/19 ) · 修改评论页点击链接产生虚线框的问题 1.3 ( 2009/01/19 ) · [...]

  2. 能否帮助优化下导航中下拉菜单
    我调试了半天都调不好
    http://www.czlands.cn
    当鼠标放在学习材料的时候

    回复

    Gravatarcuikai Reply:

    你的“学习材料”栏目也是用li结构调用的,因为样式表给导航栏下的li通配了背景,所以需要先在“学习材料”的li上将背景调为无(或者加上你喜欢的背景),要注意新加代码放置的位置,需要放到通配li的下边,这样重写它。或者你可以在自己的样式中添加!important属性,让你的背景优先显示。
    当然,如果要实现的效果比较复杂(不仅仅涉及背景),这种情况需要研究通配符里给过li什么属性,在自己那里通通抹掉就可以了。
    也可以考虑,用dl dt dd来实现。或者使用ol,使用ol的时候,注意li给法。

  3. 另外提一点,楼主可能理解错我的意思了。我指出的这个BUG,并不是点击后产生的焦点而看上去有横线,而是真的有一条横线,这本来是不应该出现的。
    之前我也是懒,没想去查个究竟,但在楼主提供的方法失败后我不得已只能自己检查哪里出了问题。
    还好,也不算枉费我10分钟内死亡的脑细胞:
    在 style.css 中有这样一段:
    #cmtswitcher a.tab {
    border:1px solid #FFF;
    border-bottom-color:#CCC;
    }
    将 border:1px solid #FFF; 注释掉即可:
    #cmtswitcher a.tab {
    /* border:1px solid #FFF; */
    border-bottom-color:#CCC;
    }

    回复

    Gravatar木子 Reply:

    谢谢,这个方法才是正确的

    Gravatarcuikai Reply:

    我明白你指的是哪里了,一直在用FF浏览器做测试,在IE6下该BUG确实存在,感谢你的解决方案。

  4. Hi CuiKai,
    sorry not to be able to understand or speak chinese, then I guess that it should be better to contact you in english rather than in french ;-)
    I’d like to thank and congratulate you for the really pleasant sunshine theme. I’m trying to use the 1.6 vs on a beta vs of a second blog not already online, and I have a little request.
    Is there a way to display “archive.php” with a summary of each message and a bottomed link to open the whole post rather than each complete ones ?
    I do appreciate a lot your great support and thank you in advance.
    Hope to read you soon,
    TF

    回复

    Gravatarcuikai Reply:

    To use WordPress excerpt function, you may replace the_content() tag with the_excerpt() when on archive (tested by is_archive()) and category (is_category()) pages in WordPress themes.

    Now that you are in the correct section, locate the following piece of code:

    <div class="entry">
    <?php the_content('Read the rest of this entry &raquo;'); ?>
    </div>

    You are going to replace that entire piece of code with the following:

    <div class="entry">
     
    <?php if(is_category() || is_archive() ) {
     
    the_excerpt();
     }
    else {
     
    the_content('Read the rest of this entry &raquo;');
     }
    ?>
    </div>

    Of course, this example uses the WordPress default template, but the same code can be used on most any template if you find the index.php or main index page and the spot where <?php the_content(); ?> is in the code.

发表评论 (无需注册)

支持CTRL+ENTER快捷提交
崔凯的博客
Powered by WordPress | Theme by ck web design | TOP 顶部
Copyright © 崔凯的博客 All rights reserved. 京ICP备09029324号.