Question

我正在设计投资组合并且我遇到了这个问题：
当我应用链接标记（＆lt; a＆gt; ）时，它会破坏我所做的设计。
字体大小要小得多，字体也不平滑，这是一个例子： Example of the problem 我该怎么做才能防止这种情况发生？我已经考虑过使用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，而不是使用＆lt; a＆gt; -tag

Answer 1

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

请按照thordarson给出的好建议 - 不要使用Javascript来做CSS的事情。

Answer 2

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

    html {
    font-size: SomeSize;
    etc.
    }

我相信你能做的一件事是将它添加到你的样式表中：

    a:link, a:visited {
    font-size: TheSize;
    }
    a:hover {
    font-size: TheSize;
    }

链接标签破坏页面设计

2 个答案: