Question

好的，是时候我愚蠢的问题了。

我有一个外部css文件，基本上将背景图像分配给按钮。

Css代码：

input.keypad
{
    cursor: pointer;
    display: block;
    min-width: 64px;
    width: 64px; 
    height: 64px;
    margin: 0;
    border: 0;
    background: url(images/btn1.jpg) no-repeat center top;
}

Html代码：

<input class="keypad" type="button" name="btnClickMe" id="btnClickMe" value="Click Me">

我的困境是我第一次加载页面它100％工作，但是当我刷新它时，它似乎忽略了css文件中设置的宽度和高度。图像在背景中，但因此而被切断。

我认为它可能是某种缓存所以我包含了pragma标签，它根本没用。有什么想法吗？

Answer 1

使用Firebug查找原因。它将帮助您查看哪些css属性应用于元素等等。

您选择该元素，您将看到它的所有css属性。 alt text http://getfirebug.com/html1.gif

您必须了解有许多有用的工具可以帮助您解决许多问题:)尤其是Firebug。这是必备工具。

Answer 2

以下是一些建议......

首先，在Firefox中使用Ctrl + F5刷新所有页面，以便每次都覆盖浏览器缓存。

其次，检查按钮在CSS中的某个地方没有覆盖它的父元素，例如“form.myForm input {...}”。

第三，不是在CSS中声明按钮背景，而是将该声明移到HTML中，如下所示：

<input type="image" class="keypad" src="images/btn1.jpg"/>

...同时保持CSS中的大小声明，就像现在一样。

看看其中一些是否有帮助。

Answer 3

首先，我要感谢Balon指出我正确的方向。

使用浏览器添加他建议并查看html源代码后，我注意到我指向外部css文件的<link标记位于我发现的html的<body内奇。在查看我的html代码后，我看到我的<link标记在<head>标记中，但是在<script标记之下，在交换标记后，代码现在可以使用100 ％。

以下是我试图提出的一个例子：

代码之前（破碎）：

<script type="text/javascript" language="javascript1.2" src="script/example.js"></script>
<link rel="stylesheet" href="css/example.css" type="text/css" media="screen">

代码之后（固定）：

<link rel="stylesheet" href="css/example.css" type="text/css" media="screen">
<script type="text/javascript" language="javascript1.2" src="script/example.js"></script>

外部CSS问题

3 个答案: