IE下元素设置百分比的问题
场景:近两天在做一个控件,该控件是一个tab型的,并且该tab有可能是两个tab标签,也有可能是多个tab标签,为了能够适应这种动态需求, 在设置标签宽度的时候,直接用的最外层容器除以tab的个数,然后加上百分比。
问题:这种情况在chrome上和IE8+上都没有发现问题,但是公司有一个项目是十年前的,必须要在IE杂项上才可以正常显示,此时我的控件就出现了问题。tab页签不能并排显示,而是换行显示了。经过排查,发现每个tab页的宽度都是设置为50%,假设外层容器宽度为501,两个tab的宽度都被解析为251px,但是两个tab的宽度加起来,已经大于外层容器了。问题就出现了。
重现:chrome下

IE7下:

知道问题原因了, 解决起来就相对简单了,当然了,也可以向下取整。处理方式有很多种。
1 /**
2 * 添加tab
3 * @param {Object} dataIndex 下标
4 * @param {Object} tabName tab名称
5 */
6 Clk.prototype.createTab = function(dataIndex,tabName){
7 var $li = $('<li style="width:'+(100/this.opts.shows.length-1)+'%"><a href="javascript:;">'+tabName+'</a></li>');
8 $li.attr('data-index',dataIndex);
9 this.$tabs.append($li);
10 }
最后献上做的控件:

IE下元素设置百分比的问题的更多相关文章
- absolute和relative元素 设置百分比宽高的差异
一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时 ...
- HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客
原文:HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/HobHunter ...
- 元素设置position:fixed属性后IE下宽度无法100%延伸
元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...
- ios下元素溢出设置 overflow:auto; 不能滑动解决办法
ios下元素溢出设置 overflow:auto; 不能滑动解决办法: overflow:auto; overflow-y:scroll; -webkit-overflow-scrolling:tou ...
- IE6、7下块级元素设置display:inline-block不换行的解决办法
使用背景 在实际的工作中,我们有的时候会把块元素设置为inline-block,这样做的目的有2个,一是块元素能够排列到一行,二是块元素就形成包裹性,能够自适应content area,而不必设置宽和 ...
- [转载]css菜鸟之HTML 中块级元素设置 height:100% 的实现
HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...
- HTML学习之给div高度设置百分比不生效的问题
这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: < ...
- css菜鸟之HTML 中块级元素设置 height:100% 的实现
HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...
- height设置百分比的条件
很多时候我们在给height设置百分比的时候不起作用, 这时候就要来谈谈什么情况下才起作用了 1)所有父级元素必须有高度: 2)必须是块级元素,行内元素不起作用: 3)ie9 以下 使用 positi ...
随机推荐
- 移动端响应式rem
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ...
- World Cup(The 2016 ACM-ICPC Asia China-Final Contest dfs搜索)
题目: Here is World Cup again, the top 32 teams come together to fight for the World Champion. The tea ...
- [LNOI2014]LCA(树链剖分)
BZOJ传送门 Luogu传送门 题目:给你一棵树,给你n个询问,每个询问要求输出$\sum_{i=l}^{r}depth(LCA(i,z))$ 细看看其实没有想象的那么难 大体思路: 1.对于每个询 ...
- MySQL-date和datetime
MySQL中 date表示只有日期: insert into stu values(id = null, birthday = '2000-01-11'); datetime则还包含了时间: inse ...
- Java核心技术 卷一 复习笔记(甲
1.数据类型包含八种基本类型,其中四种整形(int/short/long/byte),两种浮点类型(float/double), 一种用于表示Unicode编码的字符类型char,一种表示真值的boo ...
- react----父子组件之间的参数传递
1.父组件向子组件传递参数 //父组件 import React from 'react'; import './header.css' import ComponentChild from './h ...
- UVALive 6510 Stickers
Stickers Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVALive. Original ...
- 总结for循环及for循环增强遍历数组,list,set和map
一.对于集合 (1)普通for循环 int[] arr = { 2, 1, 2 }; for(int i=0;i<arr.length;i++){ System.out.println(arr[ ...
- codevs1174 靶形数独
题目描述 Description 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向Z 博士请教,Z 博士 ...
- N - Is It A Tree? 并查集
A tree is a well-known data structure that is either empty (null, void, nothing) or is a set of one ...