外部 CSS 问题答案

【问题标题】：external CSS issue外部 CSS 问题
【发布时间】：2019-06-07 05:09:49
【问题描述】：

好的，该是我今天的愚蠢问题了。

我有一个外部 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 标记，这根本没有帮助。有什么想法吗？

【问题讨论】：

米奇 - 一个问题永远不会愚蠢，只有问它的人：P

标签： html css

【解决方案1】：

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

您选择元素，您将看到它的所有 css 属性。
_{（来源：getfirebug.com）}

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

【讨论】：

嗨 Balon 我这样做了，css 是正确的。 html 代码在运行时通过使用“document.write(...)”的 .js 文件添加。也许我应该尝试使用 createElement 方法。

【解决方案2】：

这里有一些建议...

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

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

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

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

...同时保持 CSS 中的尺寸声明与现在一样。

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

【讨论】：

【解决方案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>

【讨论】：