Question

我有以下代码生成徽标，徽标在正确的位置显示，但a href=""无法正常工作？

HTML：

<div class="banner">
    <span><a href="<?php echo BASE_URL()?>link" title="View information about award"></a></span>
</div>

CSS：

div.banner{
            width:592px;
            height:1px;
            position: fixed;
            top:0;
            right:0;
            overflow: visible;
        }
        div.banner span{
            display: block;
            position: fixed;
            top: 0;
            right: 0;
            background: url(../../../i/ribbon.png) top right no-repeat;
            width: 197px;
            height: 145px;
            text-indent: -999em;
        }
        div.opens span a{
            display:block;
            width: 197px;
            height: 145px;
        }

Answer 1

您的链接类应为div.banner span a而不是div.opens span a。因此，您的链接没有文本，因为没有宽度，因为CSS规则不适用。所以没有什么可点击的。

Answer 2

可能你需要这样的东西

<div class="banner">
    <span>
          <a href="<?php echo BASE_URL().'/thisFile.html'; ?>" title="View information about award">
          This is the link to the file
          </a>
    </span>
</div>

Answer 3

DEMO on jsfiddle

我想，我不能告诉你为什么你的代码没有特别的工作，但我看到它可能是一些事情......这就是我接近它的方式。如果你将整个横幅设为链接，那么点击一些文字是-999em的页面更容易吗？

你真的不需要一个可能的包装器，但是为了保持模块化，它可以帮助你在不同的环境中反复使用这些横幅类。

如果我不解决问题，请告诉我，我会尽力避开。

HTML

<div class="fixed-wrapper">

    <a class="banner" href="#">

        Some words for robots and for assistive text ?          

        <span class="open">a different image I'm assuming?</span>

    </a> <!-- end .banner -->

</div> <!-- end .fixed-wrapper -->

CSS

.fixed-wrapper {
    position: fixed;
    top: 0; right: 0;
}

.banner {
    position: relative;
    display: block;
    width:592px;
    height:145px;

    background-color: #f06;
}

.banner {
    text-indent: -999em;
}

.open {
    display:block;
    position: absolute;
    top: 0; right: 0;
    width: 197px;
    height: 145px;

    background-color: orange;
}

.banner:hover .open {    
    background-color: yellow;
}

/* i assume that your .open does something... */

DEMO on jsfiddle

CSS背景无法点击 - 一个href =“”无效

3 个答案: