相关疑难解决方法(0)

在做CSS设计的过程中,我一直想知道一些事情.

css宽度中的小数位是否受到尊重？或者他们四舍五入？

.percentage
{
    width: 49.5%;
}

要么

.pixel
{
    width: 122.5px;
}

我在页面上有一组块元素.它们都具有CSS规则white-space,overflow,text-overflow set,以便修剪溢出的文本并使用省略号.

但是,并非所有元素都溢出.

无论如何,我可以使用javascript来检测哪些元素溢出？

谢谢.

补充:我正在使用的示例HTML结构.

<td><span>Normal text</span></td>
<td><span>Long text that will be trimmed text</span></td>

SPAN元素始终适合单元格,它们应用了省略号规则.我想检测省略号何时应用于SPAN的文本内容.

我四处搜索,找不到这个.我试图得到一个div的宽度,但如果它有一个小数点,它会舍入数字.

例:

#container{
    background: blue;
    width: 543.5px;
    height: 20px;
    margin: 0;
    padding: 0;
}

如果我这样做$('#container').width();将返回543而不是543.5.如何让它不对数字进行舍入并返回完整的543.5(或任何数字).

我发现浏览器之间的差异如何在浏览器窗口缩放时报告计算的样式尺寸.JSBIN示例位于http://jsbin.com/pilohonevo/2/.代码如下:

$(window).resize(function()
{
  var width1=$(".class1").css("width");
  $(".class1").css("width",width1);

  var width2="200px";
  $(".class2").css("width",width2);

  var width3=$(".class3").css("width");

  $("#width1").html(width1);
  $("#width2").html(width2);
  $("#width3").html(width3);

  $("#overflow1").html($(".overflow1")[0].scrollWidth);
  $("#overflow2").html($(".overflow2")[0].scrollWidth);
  $("#overflow3").html($(".overflow3")[0].scrollWidth);
});

通过按CMD几次缩放到最小值然后按CMD +几次再回到100%,在Chrome(Mac版本38.0.2125.111)中,您将获得以下值:

白色DIV 1报告其宽度为203px,尽管DIV 2和3报告200px.scrollWidth也是203,这也是错误的.这意味着如果您不确定浏览器窗口是否未缩放,则无法使用getComputedStyle或jQuerys .css()获取尺寸.由于缩放不可取消,因此您永远无法确定,您永远不会相信这些尺寸.我还测试$(elem).scrollLeft()和$(elem).scrollTop()和缩放时,这些是不可靠的为好.

因此,解决方法可以是使用"原始"值,而不是"计算"值.

是否有跨浏览器的javascript或jQuery方法来获取类似于getUnComputedStyle()使用样式表和/或样式属性中的原始值来确定维度的方法,因为它们是唯一可以缩放安全的？

根据我的测试,确定缩放级别并根据其进行更正是不可靠的,因为存在浏览器差异,并且不同样式属性中的错误级别与缩放级别不一致.

(Firefox Mac 33.1和Safari Mac版本7.1(9537.85.10.17.1)和IE 11 Win和仿真模式直到版本7报告正确的值.

Opera Mac 25.0.1614.68,Safari Win 5.1.7和上面报告的Chrome报告错误值.)

我对offsetWidth()和measureText进行了基准测试,得到了截然不同的值.它们不应该是一样的吗？他们为什么不同？

这是下面的jsfiddle和原始代码:http: //jsfiddle.net/WhGk7/2/

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<span id="visibilityHack" style="visibility: hidden; font: 15px Arial;">textAlign=start</span>
<div id="results"></div>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create a red line in position 150
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
var measureTextWidth = ctx.measureText("textAlign=start").width;
var measureTextNode =  document.createTextNode("measureTextWidth: " + measureTextWidth);
document.getElementById("results").appendChild(measureTextNode);

var swidth = document.getElementById("visibilityHack").offsetWidth;
var textnode = document.createTextNode("     offsetWidth: " + swidth);
document.getElementById("results").appendChild(textnode);


ctx.font="15px Arial";    

// Show the different textAlign values …

我得到的元素的宽度是整数而不是分数,因为我的元素宽度是49.358 px.但我正在50px使用

$('lichildren').width()

liChildren我的变量在哪里请告诉我这个问题的替代方案.