1

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

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

但是，当单击标题区域中的任何链接（并且这些链接被分隔在完全不同的类和 div 中）时，（我相信它被称为“活动”），整个链接部分都会变得混乱。登录/注册链接飞离页面，导航链接失去其 float:right 属性。我浏览了我所有的“.class a:link, a:visited 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使用谷歌浏览器的检查元素]

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

4

2 回答 2

0

问题之一是 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%;

但我认为这不是全部，

于 2013-05-14T04:13:05.453 回答
0

您的问题是您有大量的 a:active 样式覆盖并与您的默认样式相矛盾。例如，困扰您的是样式的宽度和边距设置为 671 和 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/
于 2013-05-14T04:16:43.300 回答