当前位置：文江博客话题详情

使用兼容模式在 Internet Explorer 8 中进行基本 CSS 调试

发布于 2024-10-18 08:28:48 字数 2848 浏览 5 评论 0 原文

好吧，我在这里并没有做任何花哨的事情，但是我无法让它工作，这让我发疯。

我在表单上设置按钮格式时遇到问题，但仅限于 Internet Explorer 7。

我有一个简单的表单：

<div id="menusearch">
     <form id="searchform" method="get" action="process.php">
        <div>
            <input type="text" value="" name="s" id="s_name" class="input_text"  />
            <input type="submit" class="button submit" accesskey="s" value="" />
        </div>
    </form>
</div>

按钮的 CSS 如下：

#menusearch .button {
    margin: 0;
    width:97px;
    height:30px;
    background-image: url('images/search.png');
    background-repeat:no-repeat;
    background-position:left top;
    border: none;
}

背景图像只是一个简单的按钮图像，但在 Internet Explorer 7 中它只是显示一个没有图像的标准默认按钮。它适用于我尝试过的所有其他浏览器。帮助将不胜感激。

现在，我正在使用 Internet Explorer 8（兼容模式）和开发人员工具来检查并查看出了什么问题，我发现了一些奇怪的事情。对于 CSS 的某些行，它似乎会忽略它们。例如，在上面的示例中，开发人员工具显示如下：

background-image: url(images/search.png); BORDER-BOTTOM-STYLE: none

它将这一切显示为一行，没有勾选框，就像它没有将其识别为单独的 CSS 规则一样。我可以在 CSS 中找到使用背景图像的其他地方，以及设置边框的其他地方。我已经复制并粘贴了 CSS 代码，但仍然遇到相同的错误。

我做错了什么？

编辑

好的，我已经将其剥离并发现我的问题实际上是在我的文档类型声明，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

我删除它，它起作用了。那么，我需要将原来的问题更改为以下内容：我的文档类型声明应该是什么？我从来没有真正理解不同的，并且总是只使用相同的......

所以，根据要求修剪的源代码：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">
            #menusearch .button {
                margin: 0;
                width:97px;
                height:30px;
                background-image: url('http://www.netbsd.org/images/download-icon-orange.png');
                background-repeat:no-repeat;
                background-position:left top;
                border: none;
            }
        </style>
    </head>
    <body>
        <div class="hspace">
            <div id="mspace">
                <div id="menu">
                    <div id="menusearch">
                        <form id="searchform" method="get" action="process.php">
                            <div>
                                <input type="text" value="" name="s" id="s_name" class="input_text"  />
                                <input type="submit" class="button submit" accesskey="s" value="" />
                            </div>
                        </form>
                    </div>
                </div>
            </div>

我已经省略了文档类型声明。

原文

Okay, I'm not doing anything fancy here, but it's driving me crazy that I can't get it to work.

I'm having trouble with the button formatting on a form, but only in Internet Explorer 7.

I have a simple form:

<div id="menusearch">
     <form id="searchform" method="get" action="process.php">
        <div>
            <input type="text" value="" name="s" id="s_name" class="input_text"  />
            <input type="submit" class="button submit" accesskey="s" value="" />
        </div>
    </form>
</div>

The CSS for the button is as follows:

#menusearch .button {
    margin: 0;
    width:97px;
    height:30px;
    background-image: url('images/search.png');
    background-repeat:no-repeat;
    background-position:left top;
    border: none;
}

The background image is just a simple button image, but in Internet Explorer 7 it's just showing a standard default button without the image. It works in every other browser I've tried it in. Help would be appreciated.

Now, I'm using Internet Explorer 8 (compatibility mode) and the developer tools to check it out and see what's going wrong and I've noticed something weird. For certain lines of CSS, it seems to be ignoring them. So in the above for example, the developer tool shows as follows:

background-image: url(images/search.png); BORDER-BOTTOM-STYLE: none

And it's showing this all as one line without the tick boxes, like it's not recognizing this as separate CSS rules. I can find other places in my CSS where I'm using background-image just fine and other places where I've set the borders as well. I've copied and pasted over the CSS code and still get the same errors.

What am I doing wrong?

EDIT

Okay, I've stripped it down and found that my problem is actually in my Document Type Declaration,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I remove it, and it works. So then, I need to change my original question to the following: What should my Document Type Declaration be? I've never really understood the different ones and have always just used the same one...

so, the trimmed down source code as requested:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">
            #menusearch .button {
                margin: 0;
                width:97px;
                height:30px;
                background-image: url('http://www.netbsd.org/images/download-icon-orange.png');
                background-repeat:no-repeat;
                background-position:left top;
                border: none;
            }
        </style>
    </head>
    <body>
        <div class="hspace">
            <div id="mspace">
                <div id="menu">
                    <div id="menusearch">
                        <form id="searchform" method="get" action="process.php">
                            <div>
                                <input type="text" value="" name="s" id="s_name" class="input_text"  />
                                <input type="submit" class="button submit" accesskey="s" value="" />
                            </div>
                        </form>
                    </div>
                </div>
            </div>

I've left off the Document Type Declaration.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

筑梦 2024-10-25 08:28:48

这种情况下的修复非常简单。更改您的边框，如下所示：

border: 0 solid #000

并且它是固定的。谁知道为什么，IE7 疯了。

您可以保留原始文档类型。

The fix in this case is remarkably simple. Change your border, like this:

border: 0 solid #000

And it's fixed. Who knows why, IE7 is crazy.

You can keep your original doctype.

回复收藏 0 原文

哭泣的笑容 2024-10-25 08:28:48

您可能最好使用 input type="image" ，它可以像这样获取图像 src：

<input type="image" src="/path/to/image.png" value="Submit" />

但是，这种方式的问题是必须使用 JavaScript 代码来完成翻转状态。如果您需要通过 CSS 对按钮进行更多控制，您还可以使用

You may be better off using input type="image" which can take an image src like this:

<input type="image" src="/path/to/image.png" value="Submit" />

The issue with this way, however, is that a rollover state would have to be done with JavaScript code. If you need more control over the button through CSS you could also use a <button> tag which Internet Explorer can style better than a standard input type="submit".

回复收藏 0 原文