IE的兼容性与形式的CSS样式
的源代码是这样的:IE的兼容性与形式的CSS样式
<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>
这是对文本区域和相关对象的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风格的真实标签标识,在IE保持不变! 我该如何解决这些问题?
问候......
解决了! 只是有在页面的头部这个CSS块:
div.form input[type="submit] {
padding: 2px;
background: #A2A2A2;
border: 1px solid #811D1D;
color: #000000;
height: 20px;
}
,当你看到有一个失去了引号的[类型=“提交”]。 IE浏览器无法更正代码,但其他浏览器可以这么做!这是问题
P.S:特别感谢@Bakudan引入jsfiddle Online Editor
问候......
不是IE浏览器的所有版本都支持textarea的造型。
在你的代码中,textarea在浮动的div内。好像你在问奇怪的行为。更好地浮动“标签”div(或者更确切地说,删除该div并在标签本身上做一些欺骗)。
你的意思是我应该使用texearea裸体而不是在DIV内? – DummyBeginner 2011-03-14 01:54:29
不一定,尽管你可以。我的意思是你应该漂浮'标记'的div而不是'正确'的div。为了取得成功,你应该把textarea放在一个新的div中,或者你应该在textarea中添加样式“display:block”,使它看起来像块元素(div是)。 – GolezTrol 2011-03-14 09:28:39
overflow: auto;
- 为滚动条
在这个CSS选择器中不起作用。我不知道为什么 – DummyBeginner 2011-03-14 01:14:38
http://img828.imageshack.us/img828/4557/ieoverflow.png – Bakudan 2011-03-14 01:19:48
哈哈我刚刚意识到,textarea在CSS上没有任何文本类型输入时被称为true。 (如:)。真是太好笑了! – DummyBeginner 2011-03-14 01:45:43
样式表单元素是一个严重的地狱,因为大多数控件由操作系统和浏览器的风格,这些风格是很难覆盖,在某些情况下是不可能的。但是,您应该能够实现背景颜色和滚动条消失。
你确定在你的页面上没有其他元素的id为“text”吗?
什么是可能与CSS的textarea的造型一个很好的概述可以在这里找到:http://www.456bereastreet.com/lab/styling-form-controls-revisited/text-input-multiple/#ie6-xp
在页面上也有一些输入标签类型为“文本”,但文本ID是唯一的。谢谢,我会检查你的链接 – DummyBeginner 2011-03-14 01:53:14
不是IE浏览器的所有版本都支持这一点。你正在使用哪个版本?不过你确实设法将滚动条放到左边。 :) – GolezTrol 2011-03-14 00:47:43
我试过在IE 7,8,9 – DummyBeginner 2011-03-14 00:57:43