IE 与表单 css 样式不兼容答案

【问题标题】：IE Incompatibility with form css stylingIE 与表单 css 样式不兼容
【发布时间】：2011-07-14 16:42:58
【问题描述】：

源码是这样的：

<div id="contact">
                <div class="form">
                    <form action="contact.php" method="post" name="contact-us">
                         <div class="right">
                            <div class="labeled">
                                <label for="text">body</label>
                            </div>
                            <textarea id="text" name="text" cols="20" rows="5"></textarea>
                        </div>
                    </form>
                </div>
            </div>

这是 textarea 和相关对象的 css 块：

div.right {
float: right;
margin: 5px 0;
}

div.labeled {
width: 150px;
float: right;
}

div.right div.form textarea#text, textarea#text {
background: #A2A2A2;
border: 1px solid #811D1D;
height: 50px;
margin-right: 20px;
width: 220px;
color: #FFFFFF;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
}

在 FF 中一切都是正确的，但在 IE 中，textarea 没有设置样式并且保持原样。您也可以在下图中看到差异：

您还可以看到标签标签在 FF 中的样式为 true 并且在 IE 中保持不变！我该如何解决这些问题？

问候...

【问题讨论】：

并非所有版本的 IE 都支持这一点。您使用的是哪个版本？不过，您确实设法将滚动条移到了左侧。 :)

标签： html css internet-explorer forms textarea

【解决方案1】：

并非所有版本的 IE 都支持 textarea 样式。

在您的代码中，textarea 位于向右浮动的 div 中。好像你在要求奇怪的行为。更好地浮动“标记”的 div（或者更确切地说删除该 div 并对标签本身进行一些技巧）。

【讨论】：

你的意思是我应该使用 texearea 裸而不是在 DIV 中？
不一定，虽然你可以。我的意思是你应该浮动 'labeled' div 而不是 'right' div。为了让它成功，您应该将 textarea 单独放在一个新的 div 中，或者您应该将样式“display: block”添加到 textarea 以使其表现得像块元素（div 就是）。

【解决方案2】：

http://jsfiddle.net/KzYgt/

overflow: auto; - 用于滚动条

【讨论】：

哈哈我刚刚意识到，当 CSS 上没有任何文本类型输入时，textarea 的样式为 true。（如：）。太搞笑了！！

【解决方案3】：

样式化表单元素是一个严重的问题，因为大多数控件都是由操作系统和浏览器设置样式的，而且这些样式很难覆盖，在某些情况下是不可能的。但是，您应该能够实现背景颜色和滚动条消失。

您确定您的页面上没有其他 id 为“text”的元素吗？

可以在此处找到有关使用 css 进行 textarea 样式设置的一个很好的概述：http://www.456bereastreet.com/lab/styling-form-controls-revisited/text-input-multiple/#ie6-xp

【讨论】：

在页面上也有一些输入标签，类型为“text”，但文本ID是唯一的。谢谢，我会检查你的链接

【解决方案4】：

解决了！页面标题上只有这个 css 块：

div.form input[type="submit] {
padding: 2px;
background: #A2A2A2;
border: 1px solid #811D1D;
color: #000000;
height: 20px;
}

如您所见，[type="submit"] 处丢失了一个引号。 IE 无法更正代码，但其他浏览器会这样做！这就是问题

P.s：特别感谢@Bakudan 介绍jsfiddle Online Editor

问候...

【讨论】：