CSS图片如何适应ie8的宽度、

html-css018

CSS图片如何适应ie8的宽度、,第1张

方法1.在图片的外面加上一个div,如果是图片要占整行，那么这个div不需要加什么样式；如果是和其他元素共占一行，那么这个div必须是display：inline-block,而里面的img图片只要设置width:100%让图片自适应外层的DIV，而div则自适应更外层的宽度，这个方法不存在IE8内不存在兼容性问题（IE6以下不兼容）。

方法2.在布局上和方法一一样，但是在导入图片和展示图片上有点差异，即用background导入图片，用background-size来控制图片的展示。

为了实现ridio 选中ridio 样子自动变用了input:checked + .ridio {background-image:url(../img/radio1.png)}实现，但是后来发现：checked 选择器ie8以下不能识别，最近从一个大神那发现了了一个可以使ie8版本识别css3伪类和属性选择器selectivizr，地址为http://www.zhangxinxu.com/wordpress/2010/09/selectivizr-%E8%AE%A9ie6ie7ie8%E6%94%AF%E6%8C%81css3%E4%BC%AA%E7%B1%BB%E5%92%8C%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8/

实际使用时发现，ridio 选中样式不会随着点击选中而改变样子，看起来好像就没有什么作用。后来发现，原来在ie8下我的Input隐藏了display:none这种写法好像ie8默认不能点击，只能用filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0)来透明隐藏住按钮，但是input所占的空间还是存在的，这样看起来比较丑，但是目前也没啥比较好的解决方法，只想这个样式在ie8以下使用就好，ie9以上还是用display:none来实现。

问题来了，之前是：root来区分ie9的hack的，结果selectivizr支持了：root属性，只能换了另一种写法

[html] view plain copy

<span style="font-size:14px">.hide{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0)}

@media all and (min-width:0) {

.hide{display:none}

}

</span>

input[type="text']{background-color:yellow}

单引号和双引号不可同时使用，应该为：

input[type="text“]{background-color:yellow}