最近在做一个Button控件,这个控件不仅限于使用<button>标签做容器,还允许使用<span><div>设置<h1>这样的标签。但是,对容器类型的大容忍度的代价就是要协调好这些容器在不同浏览器下的不同表现。下面总结下需要处理的兼容问题:
1. <= IE7版本的浏览器,不支持box-sizing属性的设置,且,button的box-sizing展示效果是border-box,而其余类型元素的是content-box;
2. border-box展示的元素,要让文字居中,要满足下面的等式 :
lineHeight = height - borderTopWidth - borderBottomWidth
3. IE8浏览器下,如果是纯汉字文字,即便你使用上面的方法做了居中兼容,文字也会向上飘;
知道了这三点,解决它们,目标也就达成了。
问题1和2: 考虑IE7的低占有率,我考虑将IE7浏览器下的表现兼容统一成其他浏览器,即如果使用<button>做容器,并设置了height(这个是包含了border的),那我会把这个height加上border的宽度,使得它的表现看起来是content-box的。
问题3: 这个处理要个小窍门,既然纯汉字会飘上,那么我们就增加一个非汉字的字符,并把它隐藏起来。增加下面一段css:
[元素的class]:before { content: '.'; visibility: hidden; }
现在大致的解决方向已经知道,那么,在一个height可以动态设置的环境里,怎么动态的调整这些值呢?
首先,我们需要一个获取上下border尺寸的函数:
function getBorderInfo(dom) { var borderTop; var borderBottom; // IE支持 if (dom.currentStyle) { borderTop = parseInt(dom.currentStyle.borderTopWidth); borderBottom = parseInt(dom.currentStyle.borderBottomWidth); } // FF,Chrom支持 else if (window.getComputedStyle(dom, null)) { var style = window.getComputedStyle(dom, null); borderTop = Math.ceil(parseFloat(style.borderTopWidth)); borderBottom = Math.ceil(parseFloat(style.borderBottomWidth)); } return { borderTop: borderTop borderBottom: borderBottom } }
Tip:有一个问题需要注意一下,就是IE下有一个bug,对于非<button>的元素,在你还没有给这个元素定义height属性时,你使用currentStyle去获取border信息,得出来的结果是“medium”这种相对尺寸信息,其实这个是没有意义的。而我着实不想每次设置height的时候都去调用这么一个函数去重新计算border,所以这个函数,我只用在<button>上,并且只用一次就存起来。
经过验证,即便是<button>,在你不设置一个height给它的时候,它返回的尺寸也是不对的,似乎是默认值,比如“2px”。所以我最后只能把它放到了设置height之后。
接下来我要调整我们的height了。
function setHeight(dom, height) { dom.style.height = height+ 'px'; var lineHeight = value; dom.style.lineHeight = lineHeight + 'px'; // offsetHeight是元素包含了border和内容后的总高度 var offsetHeight = dom.offsetHeight; // 说明是border-box模式 if (offsetHeight === height) { // 那么我需要把它调整成content-box var borderInfo = getBorderInfo(dom); height = height + borderInfo.borderTop + borderInfo.borderBottom; dom.style.height = height + 'px'; } }
好了,这样就行了。当然,我这里没有考虑padding(因为我没设置。。。),不过如果有这个需要,其实也就是在加加减减的时候把padding算上而已。
相关推荐
而常遇见的问题就是,每一个RadioButton时有一个图标和下方的文字组成,图标居中时,文字如果居中会出现文字过长时(例如5个)会自动换行,效果就是文字显示不全,而我们想要的效果是:图片文字都居中显示,而且文字一...
δ知大小的图片在已知容器中的垂直居中和水平居中,一直是困扰大家的问题,今天西西带给大家一个简单的实现办法,详见css文件,此代码兼容各个浏览器,源码库推荐下载!
SheetJS免费版的不支持格式,比如居中、自动换行都不行。xlsx-style是SheetJS的一个分支,且支持各种格式,可以做到文字居中,自动换行,列宽设置,单元格合并,冻结表头等。
echarts地图 china.js 省份文字居中 直接加载js文件即可
echarts地图省份文字居中,亲测有效,在html、vue中都可以用,在html将该js引入即可,在vue中将china.js 替换为该js即可;
echarts 炫酷北京地图 JSON 地图文字居中 行政区文字居中
此前给大家推荐了一个纯css实现div容器内图片、文字上下居中的效果,缺点是采用了部分css3样式,兼容性较差,相关链接:纯css实现div容器内图片上下左右居中效果 今天特意在网上找到了一款插件--jquery.valign,可...
自认为最简单的ActionBar Title文字居中的代码,适合初学者。修改样式可以到网上找,这里面就不集成了。
echarts地图省份文字居中,亲测有效,在html、vue中都可以用,在html将该js引入即可,在vue中将node_modules/echarts/map/js 文件下的china.js 替换为该js即可
利用百分比控制文字上下居中,纯css控制,div布局,通过百分比控制文字垂直居中
上图为公司自营的一个微信商城的某一部分截图,可以看到红框内部分的文字多行与单行是居中对齐的,我们现在要做的就是使用Vue把里边的文字模块制作成一个可以复用的组件。 首先我们先把css部分拿下来 css: .word-...
NULL 博文链接:https://yiminghe.iteye.com/blog/312438
ECharts中国地图--省份文字居中
这个方法使用了一个 position:absolute,有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0; 。但是因为它有固定高度,其实并不能和上下都间距为 0,因此 margin:auto; 会使它居中。使用 **margin:auto;**...
大多数文本框中文字都垂直靠上,很不美观,该控件使文字垂直居中。
div中多行文字垂直居中
用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。...在实际使用中,我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就是,必须为
frm.StartPosition=FormStartPosition.CenterScreen 有点问题无法居中 我这个方法比较适合容器的; 高手勿喷
坐标调整后城市名称居中显示。可能会乱码,但是不影响功能使用
图片再上,文字在下,在屏幕中居中显示,内置CSS样式。