【问题标题】:Css attribute selector for input type="button" not working on IE7输入类型 =“按钮”的 CSS 属性选择器在 IE7 上不起作用
【发布时间】:2011-01-12 05:38:28
【问题描述】:

我正在处理一个大表单,它在整个表单中包含很多按钮,因此我试图在我的主 css 文件中获取工作输入[type="button"],以便它可以捕获所有按钮必须为每个单独的类添加一个类,由于某种原因,这在 IE7 上不起作用,在网上检查后说 IE7 应该支持这一点。

它还必须是 type="button" 而不是 type="submit" 因为并非所有按钮都会提交表单。

谁能提示我做错了什么?

input[type="button"] {
    text-align:center;
}

我也试过input[type=button]

【问题讨论】:

标签: html css internet-explorer-7 css-selectors


【解决方案1】:

我很确定每个人都知道在标题中添加 !DockType 的解决方案并非一直都可行。

例如,我在开发人员无法访问标头的 DotNetNuke (DNN) 环境中进行开发。然后几乎不可能添加 !DocType。

在这种情况下,除了将 CssClass 与按钮相关联并在 CSS 模块中明确地引用它之外,您没有太多选择。

【讨论】:

    【解决方案2】:

    无论出于何种原因,在 IE7 中显示页面之前,属性选择器有时不会应用。这实际上只是发生在我身上。我的选择器是table[bgColor="#c0c0c0"],不适用于页面加载。由于我使用的是 IE9(浏览器模式:IE7,文档模式:IE7 标准),因此我能够使用 F12 开发人员工具查看我的 CSS 文件。我取消选中选择器,然后再次检查它。之后应用的属性。这在良好的 IE7 中完全可以重现,所以我将不得不找到一种解决方法。 (注意:在此处使用单引号、双引号或不使用引号以及大小写变化均不会产生影响。)

    【讨论】:

      【解决方案3】:

      我很难让input[type=button] 选择器在 IE7 或 IE8 中工作。问题原来是 HTML 页面缺少“!DOCTYPE”声明。一旦我添加了

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      

      然后一切正常。您显然可以使用不同的“!DOCTYPE”声明来满足您的要求。

      【讨论】:

      • iv'e 注意到 .aspx !DOCTYPE 如下:ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 哪里会你添加你建议的 html 部分?我应该用它替换 XHTML 1.0 吗?
      • 我认为定义任何类型的DOCTYPE 都会导致选择器工作。他们不使用您上面列出的文档类型吗?
      • 它不起作用,但想起来我只在谷歌浏览器上检查过它。(也许它特定于浏览器)
      【解决方案4】:

      这个问题很老,但如果有人有相关问题..我花了几分钟试图解决一个类似的问题

      input[type="Submit"] 在 IE7 上不起作用(尽管 IE 将样式正确分配给输入,正如我在开发工具中看到的那样)。

      解决方案:我从 Submit 切换到 submit 并且成功了!

      我在这里发布这个是因为它可以在调试时帮助某人。

      【讨论】:

        【解决方案5】:

        在 IE7 中获得类似的 css 语句没有问题; IE6 一直是个问题,但我相信这个 CSS 也可以在那里工作。所以我认为IE7不是问题。

        首先,您的 CSS 示例只会影响按钮,不会影响提交按钮。但这很容易解决;将您的 CSS 更改为:

        input[type="submit"], input[Type="button"]
        { text-align: center; }
        

        其次,正如 Manolo Santos 所说,您能否提供另一个覆盖 text-align 设置的 CSS 语句?仅输入元素的设置?可能值得使用 Firebug 之类的开发人员工具或 Chrome 或 IE8 中内置的开发人员组件来帮助查找 CSS 问题。

        【讨论】:

          【解决方案6】:
          input[type="button"]{ text-align:center; }
          

          你希望它做什么? &lt;input type="button"&gt; 中的文本默认已居中。

          如果你想在父元素中对齐按钮本身,你必须在父元素上设置text-align,而不是按钮。

          属性选择器 — 带或不带引号 — 在 IE7 上工作。问题浏览器是 IE6。

          【讨论】:

            【解决方案7】:

            它们在 IE7 中为我工作(两种形式,带引号和不带引号)。

            也许有另一个选择器掩盖了您的选择器。您可以尝试使您的选择器更具体,以便给予它更高的优先级,例如:

            body form input[type="button"] {
            background: red;
            }
            

            【讨论】:

              【解决方案8】:

              不幸的是,属性选择器还没有在所有主流浏览器中得到很好的实现,因为它是 CSS3 而不是当前标准 2.1。因为 W3C 的人做决定不是那么快,所以你最好不要把希望寄得太高,因为我们很快就无法使用 css3。它的某些方面已经实现,但这一方面还没有(在 IE6 中肯定没有)。

              因此,正如您自己所说,最好为您的所有输入提供一个类,并养成每次创建表单时都这样做的习惯。当您已经在编写表单时,它总是很方便,而且工作量不大。

              当我创建一个表单时,我总是将输入的类型添加为一个类,例如:

              尤其是最后两个在很多情况下会派上用场,因为您不必分别设置 .button 和 .submit 的样式,但如果您愿意,可以这样做。

              【讨论】:

              • +1。可能值得注意的是,如果 OP 不想添加类,他可以使用 javascript 或 jQuery 之类的 js 框架执行类似的操作。 :)
              • 属性选择器是 CSS 2,而不是 3,并且长期以来一直是完整的 W3“推荐”。 (即使是 CSS3 选择器也是一个“提议的推荐”,它在 IE 的世界之外已经很长而且很好地实现了!)
              • 好吧,我的错误,但它仍然没有改变它还没有很好实现的事实,因为你所说的“IE世界”现在仍然是一个很大的世界.
              猜你喜欢
              • 2013-04-26
              • 2017-05-21
              • 2019-09-08
              • 1970-01-01
              • 1970-01-01
              • 2012-02-09
              • 1970-01-01
              • 1970-01-01
              • 2019-07-30
              相关资源
              最近更新 更多