前端开发 各种兼容性问题

开发前端怎么考虑兼容性问题|移动端web前端开发兼容|前端开发移动端兼容性

1、谷歌浏览器，网页不支持字体小于12px； 这个问题再不改我就该被骂了，大家看看下面这个吧 现在可以使用css3属性对文字进行缩放处理，使用transform:scale()。如下，这个p标签是没有背景的，如果有背景的话也会受到次属性的影响，所以有背景的时候可以在文字外再套个span

[code]

<style>

p{

font-size:10px;

-webkit-transform:scale(0.8);

}

/这里的数字0.8，是缩放比例，可以根据情况变化。/

</style>

<p>字体大小兼容性测试</p>[/code] 2、ie6不支持min-height的解决方法； css代码:min-height:500px;_height:500px; 3、解决IE6,IE7不能隐藏(overflow:hidden)绝对定位溢出的内容；

哪个需要设置overflow；hidden，生效，就在哪个父级上面设置position:relative; 4、谷歌、ie浏览器默认空格（&nbsp;）宽度不一的问题 设置相同字体 font-family:”宋体”; 5、

<div class=”clear”></div>在ie6中存在默认空白问题； .clear{font-size:0;line-height:0;height:0;} 6、块级元素上加悬停在ie6上不显示； body{ behavior:url(csshover.htc);}

<!–[if lte IE 6]> <![endif]–>

IE6及其以下版本可见

<!–[if lte IE 7]> <![endif]–>

IE7及其以下版本可见

<!–[if IE 6]> <![endif]–>

只有IE6版本可见

<![if !IE]>

<![endif]>

除了IE以外的版本

<!–[if lt IE 8]> <![endif]–>

IE8及其以下的版本可见

<!–[if gte IE 7]> <![endif]–>

IE7及其以下的版本可见 有需要压缩包的js可以问我要哦 7、png-24格式的背景图片在ie6中显示灰色；

<!–[if IE 6]>

<script src=”DD_belatedPNG.js”></script>

<script> DD_belatedPNG.fix(‘.png_bg’);</script>

<![endif]–>

引用函数是DD_belatedPNG.fix()，括号里的 *表示所有css选择器.png_bg 改成你的css选择器名称。 有需要js压缩包的可以问我要哦 8、圆形头像的制作兼容 圆形头像的制作原理就是在头像上覆盖一张透明的图片，把四个角颜色设置成页面的背景颜色，中间透明。

这里需要注意的是需要把图片保存成24位的png，虽然IE6支持8位的png的透明，但是8位的png做透明圆弧图片存在效果上的问题，就是存在白色的杂边或锯齿。24位的png或32位的png的圆弧透明（半透明）图片则非常光滑，但是该死的IE6不支持24位的png或32位的png透明(其他浏览器都支持)，需要我们额外的一下处理；使用

AlphaImageLoader就可以解决IE6不能显示24位和32位PNG的透明， 但使用 AlphaImageLoader 筛选器的元素必须有宽高，width:XXpx; height:XXpx;ie6下必须充值背景为none，_background:none

<style>

test {

position:relative;

top:0;

left:0;

width:300px;

height:300px;

background:#000;

}

test span {

position:absolute;

top:0;

left:0;

width:200px;

height:200px;

background:url(“路径/中间透明的图片.png”);

color:#fff;

_background: none;

_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”路径/中间透明的图片.png”, sizingMethod=”crop”);

display:block;

}

</style>

<div id=”test”>

<imgsrc=”图片地址” width=”200″ height=”200″ />

<span></span>

</div>

9、使三列、两列div背景等高 补差等高法

<div class=”content”>

<divclass=”left”></div>

<divclass=”right”></div>

</div>

.content{overflow:hidden;} .left, .right{margin-bottom:-10000px;padding-bottom:10000px;} 这也是负margin的一个应用。这种方法是有一个缺点，就是当其中有出现锚点的时候，会出现锚点跳转错位的问题。

可能有的公司也会不让使用这个方法，因为margin、padding数值过大； 还有种折中的方法是使用背景图片达到页面基本的等高，这个大家应该懂得吧。 10、谷歌浏览器css hack解决（只有谷歌、苹果浏览器识别） @media screen

and (-webkit-min-device-pixel-ratio:0) { /这里放新建的CSS选择器/ }