IE 与表单 css 样式不兼容

Posted 2023-05-07

【中文标题】IE 与表单 css 样式不兼容

【英文标题】：IE Incompatibility with form css styling

【发布时间】：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 都支持这一点。您使用的是哪个版本？不过，您确实设法将滚动条移到了左侧。 :)

【参考方案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

问候...