Question

寻找一点CSS帮助。我正在为一些朋友在wordpress网站上工作。我把儿童主题CSS放在一起，当为IE / Safari兼容性制作一个浮动框的徽标时，我发现了如果我修复它会破坏我的网站的拼写错误。在CSS中我有：

a{
    color:#bb9230;font-size:1.25em
    }
.utility-menu 
.social-link
 a:hover
    {
    color:#fff
    }
} /*EXTRA CLOSING BRACKET*/
@media only screen and (min-width: 990px){
    .site-header.sticky-not-top
        {
        position:fixed;top:-40px
        }.site-header.sticky-not-top
.logo{
    top:4px
    }

.site-header.sticky-not-top .logo

这是最后一个人留下的代码，如果我把这个额外的结束支架拉出来，它会破坏我网站的整个顶部。看起来如果我删除结束括号，IE将顶部的代码（网站标题等）处理为“所有媒体”，而不是“仅限媒体”屏幕＆＃39; ..我有点落后，8年前我在HTML 3上学到了。

完整的CSS位于：http://northcountrycider.com/wp-content/themes/twentyfourteen-child-wood-theme/style.css

我也有屏幕拍摄问题。

删除括号后出现问题：http://i.imgur.com/E6ExIH7.png ^试图发布一个之前，但我只能发布2个链接，没有图像......

我不熟悉本网站上的提交内容（一直在搜索解决方案），但我尽量做到尽可能全面。

谢谢你的时间！

编辑：据我所知，它与我的@media屏幕和（min-width：673px）设置...似乎正在扩展它。我只是不明白那里发生了什么。

Answer 1

＆＃34;额外＆＃34;括号不是拼写错误，您的样式表使用CSS媒体查询根据浏览器窗口大小设置不同的样式。您已识别的结束括号实际上是文件前面@media定义的右括号：

@media screen and (min-width: 673px) {
    ...
}

文件中还有其他几种类型不同的大小。嵌套允许您为不同大小的屏幕（或打印等）定义不同的样式

您可以在此处详细了解它们：CSS media queries

Answer 2

收盘结束点不正确。

如上所述，

media screen and (min-width: 673px) {

部分是正确的，但是在链接/标题格式中途的结束括号的位置导致了问题。删除＆＃39;额外＆＃39;括号，它会导致整个网站输入此格式。类似于留下一个公开评论括号＆＃39; * /＆＃39;没有关闭。

Answer 3

这里也是第一次。

我已经阅读了完整的CSS并声明这些媒体查询没有结束括号：

@media screen and (min-width: 673px)
@media only screen and (min-width: 990px)

另外，请注意，您有两个最小宽度的媒体查询：673px（一个在990px之前，一个在之后）。我使用了一个编辑器，突出了匹配的括号，parens等。它可以帮助你更好地看到这些问题。

Answer 4

您的代码格式不正确，有很多遗漏＆＃39;;＆＃39;字符和缩进有点偏 - 这另外会让你有毛刺的风险。

如果您重新格式化，在大多数代码程序中，您可以＆＃34;折叠＆＃34;并确保一切都正确嵌套，并很容易解决所有问题。双括号看起来像是上述媒体查询的结束括号，如果我不得不猜测上面发布的内容。

为了说明，剪辑中的第二个媒体查询应如下所示：

@media only screen and (min-width: 990px) {

  .site-header.sticky-not-top {

    position:fixed;
    top:-40px;

    }

  .site-header.sticky-not-top .logo{

    top:4px;

  }

}

希望有所帮助！

CSS - 修复样式Typo打破网站

4 个答案: