Question

问题：我的页面标题是这样排列的（对不起，我还没有足够的代表来直接发布图片，或发布两个以上的链接。这就是为什么我有[] ed http：//在接下来的第二个两个链接中，以防你们中的一些人希望通过Imgur看到问题但没有实际访问相关网页）：

http://i.stack.imgur.com/bn0fj.png

但是当标题区域中的任何链接（并且这些链接在完全不同的类和div中被分开）被点击时，（我相信它被称为“活动”），整个链接部分都会变成cray。登录/注册链接飞离页面，导航链接丢失其float：right属性。我查看了所有的“.class a：link，a：访问过a：hover，a：active”，找不到任何影响他们的风格！我将尝试以某种方式描述我的方法，即某人可能能够在我的CSS语法中标记错误，尽管我认为问题可能不那么简单。

单击标题中任意位置的链接的效果（请注意我说“标题，但此标题未设置为单个标题div，它是一系列堆叠的，单独的div向左或向右浮动）：

http://i.stack.imgur.com/7oYtG.png

或者：

[HTTP：//] i.stack.imgur.com/W87fC.png

甚至飞离页面：

[HTTP：//] i.stack.imgur.com/mB0Zh.png

请参阅www.gamemode.org以获取此实例。

我的样式表非常庞大，但我想我可以用一种方式来描述这个，我可以从简单的CSS基本提示中获得答案，而不是“粘贴这个”修复。

我一直在GameMode.org的标题中设置我的链接样式，以便我有一个顶部栏，其登录/注册链接浮动到左侧，以及一个导航链接浮动到右侧的下部导航部分。我造型的方式如下：

HTML：

 <div class="class_name"><a>Link</a></div>
 <div class="another_class_name"><a>Link</a></div>

CSS：

 .class_name a:link, a:visited, a:active
 {
 margin:0em 0em 0em 0em;
 float:left;
 color:somecolor;
 (etc)
 }

 .class_name a:hover
 {
 (simple hover effect)
 }

 .another_class_name a:link, a:visited, a:active
 {
 margin:0em 0em 0em 0em;
 float:right;
 color:somecolor;
 (etc)
 }     

 .another_class_name a:hover
 {
 (simple hover effect)
 }

这些款式有问题吗？有没有人在这里慷慨地在www.gamemode.org上查看我的网页和样式并尝试找到我的问题？我已经使用谷歌浏览器网页工具查了好几个小时，似乎无法找到活动时（点击时）疯狂链接的来源，虽然我注意到当删除本地样式时它们不会这样做。

[编辑：我会添加一些CSS，但由于我无法确定问题，我不能这样做 - 任何想要调查它的人都可以轻松查看和篡改CSS像往常一样，谷歌Chrome的Inspect Element]

[编辑II：上面的代码是不是只设置了该div中的链接？示例：| .this_class a：link，a：active {color：red; } |将与“样式非活动链接和类中的活动链接=”this_class“红色相同”。这是不正确的吗？

Answer 1

问题之一在style.css的第222行

.server_slot a:link, a:active, a:visited {
    color: white;
    float: left;
    font-family: 'Geo',sans-serif;
    font-size: 1.6em;
    margin: -7% 0 128%;
    max-height: 30px;
    overflow: hidden;
    padding: 5% 0 0;
    text-align: center;
    text-decoration: none;
    width: 100%;

删除widht:100%;

但我认为这不是全部，

Answer 2

你的问题是你有大量的a：活动样式覆盖并且与你的默认样式相矛盾。例如，困扰你的是宽度和边距设置为671和styles.css的223行摆脱那些，一切都会正常。

这是一个截图，包含有问题的项目：

http://prntscr.com/14ttsx

改变这个：

.top a:link, a:visited, a:active
{
float:left;
margin:0% 1% 0% 2%;
font-size:19pt;
color:white;
text-decoration:none;
}

到此：

.top a:link, a:visited, a:active
{
float:left;
margin:0;
width: auto;
font-size:19pt;
color:white;
text-decoration:none;
}

这样你就不会破坏其他风格的链接。

影响顶部其他样式的问题如下：

.server_slot a:link, a:active, a:visited {
...
}

该部分代码的目标是server_slot类中的活动链接，但也包括所有活动链接和所有访问过的链接。你应该把它改成：

.server_slot a:link, .server_slot a:active, .server_slot a:visited {
...
}

其他随机建议：

不要混合单位，在一个规则中你在em中使用font-size而在pt中使用另一个规则。使用一个并坚持下去
但是不要使用pt，除非是打印，这就是原因：http://css-tricks.com/css-font-size/

棘手的CSS纠结：来自不同div的链接样式似乎都是来自其他地方的风格

2 个答案: