前端开发 各种兼容性问题

开发前端怎么考虑兼容性问题|移动端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选择器/ }
前端开发怎么让各大浏览器兼容|移动web前端开发兼容问题|前端开发个浏览器兼容性
» 本文来自:前端开发者 » 《前端开发 各种兼容性问题》
» 本文链接地址:https://www.rokub.com/4388.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!