利用小数解析差异解决浏览器兼容性问题

通常我们写 css 的时候写的数字都是整数,如 font-size:12px; margin:20px; 那么看到标题可能有人会问,css 属性值可以有小数点么?如果是小数那会显示成什么样子?和整数有什么区别?

首先我们先看个例子,通过例子来观察下小数在各个浏览器的差异。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>decimal</title>
    <style type="text/css">
    body{font-family:SimSun;text-align:center;}
    p{margin:20px;height:30px;}
    .font11-9{font-size:11.9px;}
    .font11-4{font-size:11.4px;}
    </style>
</head>
<body>
    <p class="font11-9">这段文字的大小是11.9像素。</p>
    <p class="font11-4">这段文字的大小是11.4像素。</p>
</body>
</html>

我们可以看出在 chrome,firefox,ie8 下小数会通过四舍五入的方式转成整数,而 ie6,ie7 会对小数进行下限取整转成整数。通过这一特性我们在某些情况下,用小数来替代 css hack。譬如:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>decimal</title>
    <style type="text/css">
    body{font-family:SimSun;font-size:30px;}
    .black{background:black;width:500px;height:500px;margin-left:auto;margin-right:auto;overflow:hidden;color:white;}
    .white{background:white;width:100px;height:100px;margin:0.9px;}
    </style>
</head>
<body>
    <div class="black">
        <div class="white"></div>
        <p>在ie6,ie7下红色块离黑色块没有外边距,而其他的浏览器则有 1px 外边距。一般我们是写css hack,如margin:1px;*margin:0;但是我们现在可以通过小数来解决啦。</p>
    </div>
</body>
</html>

不仅仅缩短的代码的长度,还去掉了 css hack。

总结:虽说这个小数解决一些兼容性问题很神奇,但是它的缺点也很明显,就是适用范围,只能解决相差1像素的浏览器差异,只能解决 ie6,ie7 下值小1像素的浏览器差异。

浏览器:chrome,firefox,ie8,ie7,ie6

利用小数解析差异解决浏览器兼容性问题

时间: 2024-10-17 18:14:56

利用小数解析差异解决浏览器兼容性问题的相关文章

怎么解决浏览器兼容性问题

怎么解决浏览器兼容性问题 所有浏览器 通用 height: 100px;IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 1.内外边距被统一: 不同浏览器对HTML标记所具有的内外边距属性具有不同的定义.因此如果想消除这种差距,应该在相应的CSS部分加入以下CSS代码:*{margin:0px;padding:0px;}借于此,所有标记

【CSS】怎么解决浏览器兼容性问题

[CSS]怎么解决浏览器兼容性问题 工具/原料 Dreamweaver CSS 方法/步骤 不同浏览器对HTML标记所具有的内外边距属性具有不同的定义. 因此如果想消除这种差距,应该在相应的CSS部分加入以下CSS代码: *{margin:0px;padding:0px;} 借于此,所有标记的内外边距被统一起来. 优先级问题: 对于同一标记属性所给定的值,有不同的优先级.其中优先级最高的是内联代码,其实是页内CSS,接下来是浏览器默认设置,最后才是外部CSS所做的限制. Margin不一致的问题

解决浏览器兼容性问题

每次做完一个界面功能,用不同浏览器测试. 解决浏览器兼容性问题

WEB前端解决浏览器兼容性问题

1.HTML对象获取问题 FireFox:document.getElementById("idName"); ie:document.idname或者document.getElementById("idName"). 解决办法:统一使用document.getElementById("idName"); 2.const问题 说明:Firefox下,可以使用const关键字或var关键字来定义常量; IE下,只能使用var关键字来定义常量. 解

用CSS hack技术解决浏览器兼容性问题.

/* CSS属性级Hack */ color:red; /* 所有浏览器可识别*/ _color:red; /* 仅IE6 识别 */ *color:red; /* IE6.IE7 识别 */ +color:red; /* IE6.IE7 识别 */ *+color:red; /* IE6.IE7 识别 */ [color:red; /* IE6.IE7 识别 */ color:red\9; /* IE6.IE7.IE8.IE9 识别 */ color:red\0; /* IE8.IE9 识别*

解决浏览器兼容性问题的测试方法

1.cnpm i spy-debugger -g 2.spy-debugger 启动服务 3.将手机wifi 手动设置代理 IP 为电脑当前ip---------------------> 端口是9888---------->http://127.0.0.1:61855 打开调试 正在启动代理 本机在当前网络下的IP地址为:10.0.87.216 node-mitmproxy启动端口: 9888 浏览器打开 ---> http://127.0.0.1:61855 运行项目后如下为例,用手

前端开发要注意的浏览器兼容性问题整理

转于 首先,我们要知道,为什么各浏览器会产生兼容性问题?               产生这个问题的主要原因是市面上的浏览器的种类很多,但由于不同的浏览器的内核不一致,从而导致各个浏览器对网页的解析就产生了差异. 解决浏览器兼容性问题,还是从三个方面入手:html部分.css部分.js部分. 1.html部分 a.最突出也是最容易想到的就是高版本的浏览器用了低版本的浏览器无法识别的元素,从而导致不能解析.这点主要体现在html5的新标签上 解决办法是:htmlshim框架可以让低于IE9的浏览器

HTML`CSS_网站页面不同浏览器兼容性问题解决

目前,最为流行的浏览器共有五个:分别是ie,Edge浏览器(属于微软),火狐,谷歌(chrome)Safari和Opera五大浏览器. Trident内核:IE ,360,,猎豹,百度: Gecko内核:火狐----------->这个浏览器内核是开源的浏览器内核,插件非常多,-------------->缺点:打开速度慢(加载flash插件)<-----额外介绍----->. Presto内核:Opera7及以上版本 Webkit:遨游,苹果 ,symbian:Safari.Ch

CSS---解决浏览器兼容性

<html> <head> <title></title> <style type="text/css"> *{ padding: 0; margin:0; } .line{ display: inline-block; width: 40px; border-top: 1px solid #f00; vertical-align: middle; *margin-top: 12px; } .txt{ font-size: 2