“width：calc（100％/ 3）”;不能正常工作在任何IE [英] "width: calc(100% / 3);" not working properly in any IE

问题描述

我有一个3列布局，应该填充整个屏幕，所以我的列使用：

  width：calc （100％/ 3）; 
  

比如我的屏幕是782px宽：

782/3 = 260.66 compl

但我遇到的问题是在Internet Explorer ，其中它将像素四舍五入到两个小数位（260.67）

260.67 * 3 = 782.01

< blockquote>

所以在一定宽度，我失去了1/3的页面，因为它包裹在下面。

a href =http://jsfiddle.net/6wo3q40e/1/ =nofollow>示例：

  function onResize（）{$（'ul'）。each（function（）{var H = eval（$（this）.height（）/ $（this）.children（'li'）。 ）.children（'li'）。outerHeight（H）; $（this）.children（'li'）。css（'line-height'，H +'px'）; $（this）.children '）.outerWidth（$（this）.width（））;}）;} var timer; $（window）.resize（function（）{timer&& clearTimeout（timer）; timer = setTimeout（onResize，100）;}）; onResize（）;  

  html {height：100％;} body {background：black; margin：0; padding：0; overflow：hidden;高度：100％;} ul {width：calc（100％/ 3）; display：inline-block; overflow：hidden; margin：0; padding：0; float：left;高度：100％; list-style：outside none none;} ul li {background：rgb（230,240,163）;背景：-webkit梯度（线性，0 0，0 100％，来自（rgba（230,240,163,1）），色彩停止（0.5，rgba（210,230,56,1）），色彩停止（0.51，rgba 195,216,37,1）），（rgba（219,240,67,1）））;背景：-webkit-线性梯度（rgba（230,240,163,1）0％，rgba（210,230,56,1）50％，rgba（195,216,37,1）51％，rgba（219,240,67,1）100％ ）;背景：-moz-线性梯度（rgba（230,240,163,1）0％，rgba（210,230,56,1）50％，rgba（195,216,37,1）51％，rgba（219,240,67,1）100％ ）;背景：-o-线性梯度（rgba（230,240,163,1）0％，rgba（210,230,56,1）50％，rgba（195,216,37,1）51％，rgba（219,240,67,1）100％ ）;背景：线性梯度（rgba（230,240,163,1）0％，rgba（210,230,56,1）50％，rgba（195,216,37,1）51％，rgba（219,240,67,1）100％ filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃e6f0a3'，endColorstr ='＃dbf043'，GradientType = 0）; text-align：center;}  

 < script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"> ;</script> ;<ul id =ul1> < li>测试1< / li> < li>测试2< / li>< / ul>< ul id =ul2> < li>测试3< / li> < li>测试4< / li>< / ul>< ul id =ul3> < li>测试5< / li> < li>测试6< / li>< / ul>  

我知道我可以使用 width：33.33

解决方案

％

这似乎是@ web-tiki的建议：

  width：33.33％; 
  

是最好的选择。

I have a 3 column layout that should fill the whole screen so on my columns I am using:

width: calc(100% / 3);

So lets say for example my screen is 782px wide:

782 / 3 = 260.66̅

However the problem I have is in Internet Explorer, where it rounds the pixels to two decimal places (260.67)

260.67 * 3 = 782.01

So at certain widths, I lose a 1/3 of my page as it wraps underneath.

Here's an example:

function onResize() {
    $('ul').each(function() {
        var H = eval($(this).height() / $(this).children('li').length);
        $(this).children('li').outerHeight(H);
        $(this).children('li').css('line-height', H + 'px');
        $(this).children('li').outerWidth($(this).width());
    });
}

var timer;
$(window).resize( function() {
    timer && clearTimeout(timer);
    timer = setTimeout(onResize, 100);
});
onResize();

html {
    height:100%;
}
body {
    background:black;
    margin:0;
    padding:0;
    overflow:hidden;
    height:100%;
}
ul {
    width: calc(100% / 3);
    display: inline-block;
    overflow:hidden;
    margin:0;
    padding:0;
    float:left;
    height:100%;
    list-style: outside none none;
}
ul li {
    background: rgb(230,240,163);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(230,240,163,1)), color-stop(0.5, rgba(210,230,56,1)), color-stop(0.51, rgba(195,216,37,1)), to(rgba(219,240,67,1)));
    background: -webkit-linear-gradient(rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%);
    background: -moz-linear-gradient(rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%);
    background: -o-linear-gradient(rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%);
    background: linear-gradient(rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 );
    text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ul1">
    <li>Test 1</li>
    <li>Test 2</li>
</ul>
<ul id="ul2">
    <li>Test 3</li>
    <li>Test 4</li>
</ul>
<ul id="ul3">
    <li>Test 5</li>
    <li>Test 6</li>
</ul>

Does anyone know of an elegant way of solving this problem?

I know I could use width: 33.33%, however there's a small part of me inside that cries knowing that it's not 100% bang on.

解决方案

It would seem that the suggestion by @web-tiki with:

width:33.33%;

is the best option.

这篇关于“width：calc（100％/ 3）”;不能正常工作在任何IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！