0

我希望禁用一些 html 控件，并且由于 IE 和 Firefox/Webkit 浏览器之间的差异而遇到跨浏览器问题。主要问题在以下行中很明显：

<input type="text" name="badIE" disabled="disabled" style="color:blue;" value="IE won't show this correctly" />

在 IE 中，上面的输入会有灰色文本，而在我测试过的所有其他浏览器中，文本都是蓝色的。看起来 IE 允许disabled文本输入字段优先于文本颜色的 CSS 规则。是否有任何既定的最佳实践或 IE CSS hack 来解决此类问题？

4

2 回答 2

1

根据此处赞成（但未接受）的答案，您有点坚持使用“只读”。

只是出于好奇——你为什么要在一个你甚至不希望你的用户能够关注的文本区域中显示文本？在我看来，您最好在常规文本 HTML 元素（例如<p>）中显示它。

于 2012-08-01T17:21:41.990 回答
0

事实证明，解决这个问题的方法很少，但没有一个确切的答案。为了提供最完整的答案，这里列出了可能的解决方案。

  1. 接受浏览器之间的差异并继续使用禁用的字段。这可能是正确的答案。正如chipcullen在他的评论中所建议的那样，几乎没有必要让所有浏览器看起来都相同。最好简单地接受它们之间的差异并与之合作。

  2. 使用只读属性而不是禁用。这种方法的问题是用户仍然可以与只读控件交互。例如，用户可以专注于控件或在文本中间粘贴一个闪烁的光标。如果交互是一个主要问题，您总是可以将禁用的控件隐藏在一个不可见的元素后面，尽管该方法是在 hacky 方面。

  3. 我选择的选项是用纯文本元素替换输入元素。尽管这种方法可能不像听起来那么简单。我的页面是交互式的，某些元素将根据客户端操作启用/禁用。为了处理过渡，我将以下 Javascript 放在一起（在chipcullen 的建议和 jQuery 的帮助下）：

    function disabledToSpan() {
$('input[type=text]:disabled, textarea:disabled').replaceWith(function () {
    return $('<span>' + $(this).val() + '</span>').attr('class',
        $(this).attr('class')).addClass('disabledTextInput');
    });
}

    总之，这将找到所有禁用的文本输入和文本区域，将它们切换到跨度，同时保留它们的值和类，最后添加一个 disabledTextInput 类来专门设置禁用元素的样式。

于 2012-08-08T22:15:14.460 回答