h:commandButton 与 IE 中的 css 不一样答案

【问题标题】：h:commandButton with css not the same in IEh:commandButton 与 IE 中的 css 不一样
【发布时间】：2013-11-07 09:51:06
【问题描述】：

我有一个带有styleClass="waiButton" 的 h:commandButton。生成的html是

<input class="waiButton" type="submit" value="Add existing" name="detailForm:j_idt184">

在 css 中我有以下内容：

a.waiButton, a.waiButton:link, a.waiButton:visited, input.waiButton[type="submit"], input.waiButton[type="button"]
{
    background: none repeat scroll 0 0 #C7E4F7;
    border-radius: 5px 5px 5px 5px;
    color: #000000;
    display: inline-block;
    font-size: 11pt;
    margin: 4px 2px;
    padding: 2px 10px;
    text-decoration: none;
}

谁能告诉我为什么在除 IE 之外的所有浏览器中我的按钮都以这种方式显示（想要的）

在 IE 中是这样的

在带有 Firebug 的 FF 中，我可以看到按钮分配了正确的样式，而在 IE (F12) 中未分配样式...

IE 有什么不同？任何提示将不胜感激。

编辑：

文档类型在那里：

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

编辑 2：

如前所述，DOCTYPE 已设置，但我注意到一些奇怪的现象：在页面代码中看到的 FF 中单击 F12

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

在 IE 中

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

<!Doctype 与 <!--DOCTYPE 会是问题吗？

如果是，为什么 IE 将其设置为注释？在我的代码中有<!DOCTYPE ...

【问题讨论】：

只是猜测，你在 html 代码的开头提到了 doctype 吗？
这个问题出现在所有版本的IE还是特定的IE版本中？
您的 CSS 从 IE7 开始应用（仅在标准模式下），但 border-radius 除外，它已在 IE 版本 9 中引入。
@Mr_Green：文档类型已定义（参见有问题的编辑）
就像说的那样，your code 在 IE > 7 中工作，除了 border-radius 你只能在 IE > 8 中看到...如果我把你的 DTD 放到一个文件中，IE10 会说： "HTML1524: Invalid doctype, the shortest possible doctype definition is <!DOCTYPE html>."

标签： html css internet-explorer jsf-2

【解决方案1】：

border-radius 属性仅支持 IE9+ 浏览器。为使 css 属性选择器 input.waiButton[type="submit"] 能够在 IE8 及更早版本的浏览器中工作，必须声明 !DOCTYPE。

【讨论】：

【解决方案2】：

发现问题。我发现here，如果你在 DOCTYPE 声明之前有一个 HTML cmets，这将触发 quirks 模式。

我将 DOCTYPE 声明移到顶部，现在它可以工作了...

【讨论】：