与 php 一起使用 css 时出现错误？答案

【问题标题】：Getting error in css while using it with php?与 php 一起使用 css 时出现错误？
【发布时间】：2012-05-08 07:14:05
【问题描述】：

嗨，我也是 css 和 php 的新手，我尝试在我的 php 站点中使用它我有 css，如下所示，我试图在悬停时更改图像，但我收到错误，我的半图像仅更改...

虽然我使用的图像是，

我的css代码是，

#header #nav a {
    float:left;
    margin-left:7px; 
    padding-left:17px; 
    background:url("../design/nav-l.png") 0 -35px no-repeat; 
    text-decoration:none;
}
#header #nav a span {
    float:left; 
    display:block; 
    padding-right:17px; 
    background:url("../design/nav-r.png") 100% -35px no-repeat; 
    line-height:35px;
}
#header #nav a:hover { background-position:0 -100px; }
#header #nav a:hover span { background-position:100% -70px; }

希望您的回复提前谢谢！

最好的问候，

【问题讨论】：

使用萤火虫，很棒的工具。
这个问题与PHP无关。如果您发布一个说明问题的网址，您将有更好的运气。 firebug 和 web 开发者插件也是如此。
你不应该用“PHP”标记这个问题
这个css有错误吗？？
整个问题在于，当您将鼠标悬停在图像位置设置不正确时

标签： css button hover

【解决方案1】：

您不能在同一个 CSS 值上混合使用 % 和 px。

background:url("../design/nav-r.png") 100% -35px no-repeat;
#header #nav a:hover span { background-position:100% -70px; }

这两行是无效的 CSS，可能导致解析器崩溃。首先使用 % 或 px 设置它们，但不能同时使用两者。

background-position: 100px -35px; <--- OK  
background-position: 100% 50% <--- OK  
background-position: 100% 100px <--- Invalid

如果此后 UI 无法正常运行，您应该使用 Firebug 等网络检查器或浏览器内置的检查器来查看幕后情况。这通常会为您提供有关您的样式有什么问题的重要线索。

如果您在尝试使用网络检查器自行解决问题后仍然遇到问题，请更新问题并提供更多详细信息（您尝试过什么，结果如何），我们会更好地帮助您解决问题它:)

【讨论】：

【解决方案2】：

在下面的代码中，nav-r 是您的小图像，而 nav-bg 是您的大 bg 图像

#header #nav a {
    color: #fff;
    float:left;
    margin-left:7px; 
    padding-left:17px; 
    background:url("nav-r.png") 0 -35px no-repeat; 
    text-decoration:none;
}
#header #nav a span {
    float:left; 
    display:block; 
    padding-right:17px; 
    background:url("nav-bg.png") 100% -35px no-repeat; 
    line-height:35px;
}
#header #nav a:hover { background-position:0 -70px; }
#header #nav a:hover span { background-position:100% -70px; }
</style>
</head>
<body>
<div id='header'>
    <div id='nav'>
        <a href='#'><span>Rajan Rawal</span></a>
    </div>
</div>
</body>
</html>

一旦你正确地检查了这一点，那么你只需更改下面的 css 并查看魔法

#header #nav a {
    color: #fff;
    float:left;
    margin-left:7px; 
    padding-left:17px; 
    background:url("nav-r.png") 0 0 no-repeat; 
    text-decoration:none;
}
#header #nav a span {
    float:left; 
    display:block; 
    padding-right:17px; 
    background:url("nav-bg.png") 100% 0 no-repeat; 
    line-height:35px;
}

【讨论】：