-3

我正在设计一个作品集，但遇到了这个问题：
当我应用链接标签 ( <a> ) 时，它会破坏我所做的设计。
字体大小要小得多，字体也不那么流畅，这里有一个例子： 问题示例 我能做些什么来防止这种情况发生？
我考虑过使用 js 来完全处理链接（我将使用一些 js 来处理这些链接）。

编辑：
对不起，应该包括来源：
HTML：

<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
<nav>
    <div class="navwrap">
        <div class="logo inline"></div>
        <a href="#a"><div class="inline">About</div></a>
        <a href="#p"><div class="inline">Projects</div></a>
        <a href="#c"><div class="inline">Code</div></a>
        <a href="#l"><div class="inline">Learn</div></a>
    </div>
</nav>

CSS：

body {
    background: #e3e3e3;
}

a, a:link, a:visited, a:hover, a:active{
    text-decoration:none;
    color:inherit;
}



/* NAVIGATION */
.logo {
    width: 128px;
    height: 128px;
    background-size: 100%;
    background-image: url(http://djonn.dk/logo.svg);
}

.inline {
    float: left;
}

.navwrap {
    margin: 0 auto;
    height: 128px;
    width: auto;
    margin: 0 auto;
    width: 995px;
    margin-bottom: 35px;
}

nav a  {
    position: relative;
    top: 48px;
    display:block;
}
nav a div{
    font-family: 'Ubuntu Condensed', sans-serif;
    font-size: 2.25em;
    padding: 0 15px 0 15px;
    border-left: 1px solid black;
}

nav a:nth-of-type(1) div{
    border: none;
}

@media only screen and (min-width: 0px) and (max-width: 760px) {
    .navwrap {
        width: 585px;
    }

    nav a div {
        font-size: 1.5em;
    }
}

@media only screen and (min-width: 761px) and (max-width: 995px) {
    .navwrap {
        width: 761px;
    }

    nav a div {
        font-size: 1.85em;
    }
}

视觉参见：http: //jsfiddle.net/djonn/DJG4L/

澄清您的一些评论：
- 这是完全自定义的 css，我使用的是 css 重置表。
- 我不会使用 js 代替 css，而是使用 <a>-tag

4

2 回答 2

0

我猜你的样式表看起来像这样：

    html {
    font-size: SomeSize;
    etc.
    }

我相信您可以做的一件事是将其添加到您的样式表中：

    a:link, a:visited {
    font-size: TheSize;
    }
    a:hover {
    font-size: TheSize;
    }
于 2013-02-02T01:31:56.593 回答
0

看起来您在 CSS 中的任何内容都不适用于您的链接。您必须设置您的样式（a.hover a.active 等）。只有 H2 样式不会为带有链接的 H2 提供相同的结果（除非您已经定义并应用了 CSS 类）

请遵循 thordarson 给出的好建议——不要将 Javascript 用于 CSS 的目的。

于 2013-02-02T01:26:41.463 回答