样式的IE问题< select />元件 [英] IE issue with styling <select/> element
本文介绍了样式的IE问题< select />元件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
请考虑以下HTML标记：
<？xml version =1.0encoding =UTF-8？ >
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title> search / master< / title>
< style type =text / css>
select {
background-color：pink;
}
选项{
background-color：white;
}
< / style>
< /头>
< body>
< p>
< select>
< option> one ........< / option>
< option> two ........< / option>
< / select>
< / p>
< / body>
< / html>
在FF上输出如下：（类似的输出也出现在Chrome，Safari和Opera上） p>
但在IE上输出如下：
什么是可靠和简单的解决方法，使IE上的输出看起来类似于其他浏览器？
解决方案
如果你确定要这样做，你可以使用1px x 1px的背景图片，并将选项设置为 ：transparent
select {
background：url（http://ajthomas.co .uk / stackoverflow-help / back.png）;
}
选项{
background：transparent;
}
查看 jsfiddle example 我为你做了
Consider the following HTML markup:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>search/master</title>
<style type="text/css">
select{
background-color: pink;
}
option{
background-color: white;
}
</style>
</head>
<body>
<p>
<select>
<option>one........</option>
<option>two........</option>
</select>
</p>
</body>
</html>
Output on FF as follows: (Similar output comes on Chrome, Safari and Opera as well)
But output on IE as follows:
What is the reliable and simple workaround to make the output on IE looks similar to other browsers?
解决方案
If you definitely want to do this, you could use a 1px x 1px background image, and set the option to :transparent
select{
background: url(http://ajthomas.co.uk/stackoverflow-help/back.png);
}
option{
background: transparent;
}
See the jsfiddle example i have done for you
这篇关于样式的IE问题< select />元件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
