Re: Computed Style and Border Width - Question [CSSOM]

> http://dhtmlkitchen.com/test/bug/float-bug.html
>
> And using the following javascript:
> javascript:var ds =
> document.getElementById('blinds').getElementsByTagName('div');alert(getComputedStyle(ds[0],'').width)

IE7 (currentStyle) return "auto" and if we look at the LI item, we get 
"20%".
In fact, IE's currentStyle property return only the "winner" of all 
stylerule applied on the element.

If we look at offsetWidth (it must be an integer), we get 153.
Hope it can useful to determine the way IE handle this problem.

> However, with the border width example, it seems that device pixel is 
> used.
>
> But with margin, a CSS Pixel is used. It's inconsistent.
>
> Here's an example demonstrating the problem, where margin uses a css
> pixel and border-width does not. The decimal math is also somewhat
> interesting (not IEEE 754).
>
> ======================================================
> <!DOCTYPE html>
> <html>
> <head>
>    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" 
> />
>    <title>DOM positioning Test</title>
>
>    <style type='text/css'>
>        #container {
>            position: absolute;
>            font-size: 0;
>        }
>
>        #c1 {
>            position: absolute;
>            height: 6px;
>            background: #00c;
>        }
>
>        #target {
>            position: absolute;
>            display: block;
>            height: 1px;
>            background:#FF0;
>        }
>    </style>
> </head>
> <body style="position: relative;margin:0;padding:0;">
>
> <!-- In IE, a relatively positioned descendant gets position offset by
> font-size -->
> <div id="container">
>    <div id="c1" style="">
>        <a id="target">a</a>
>    </div>
> </div>
>
> <script type='text/javascript'>(function(){
> var target = document.getElementById("target"),
>    container = document.getElementById("container"),
>    c1 = document.getElementById("c1");
>
>  // Any larger and Opera will fail.
>  var fontSize = 77,
>      emSize = 1.18;
>
> // Every element gets the same font size.
>  document.documentElement.style.fontSize =
>    document.body.style.fontSize =
>    c1.style.fontSize =
>    container.style.fontSize =
>    target.style.fontSize = fontSize + "px";
>
> // Assign borders.
>  container.style.borderLeft =
>  c1.style.borderLeft = emSize + "em solid red";
>
> try {
>
>  var expectedBorderWidth = (fontSize * emSize),
>      borderLeftWidth =
>    parseFloat(getComputedStyle(c1,'').borderLeftWidth );
>
>  alert(["borderLeftWidth = " + borderLeftWidth,
>  "expectedBorderWidth = " + expectedBorderWidth])
>
>  target.style.marginLeft = emSize + "em";
>  target.style.left = 0;
>
>  var expectedMargin = fontSize * emSize,
>      actualMargin = getComputedStyle(target,'').marginLeft;
>  alert(["expectedMargin: " + expectedMargin,
>        "actualMargin: " + actualMargin]);
>
>  var expected = Math.round(expectedBorderWidth * 3),
>      actual = target.getBoundingClientRect();
>
>  alert([expected, actual.left,
>    expected == actual.left ? "PASS" :
>    "getting computed coords from EM values failed."]);
>  } catch(ex) { alert(ex); }
> })();
> </script>
> </body>
> </html>
>
> ======================================================

Same here if we add << function getComputedStyle(el) { return 
el.currentStyle; } >>
We got the value in "em".
_____________

I've made another sample to help to detect "visually" how browsers handle 
fractionnal widths

Input : 20px; 20.5px; 50% of 41px; 21px;

IE 6 : 20px; 20px; 21px; 21px;
IE 7 : 20px; 20px; 21px; 21px;
IE 8b1 : 20px; 20px; 21px; 21px;

O 9.5 : 20px; 20px; 20px; 21px;

S 3.1 : 20px; 20px; 20px; 21px;

FF 2 : 20px; 21px; 21px; 21px;
FF 3 : 20px; 20.5px; 20.5px; 21px;

============================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TD/html4/strict.dtd">
<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" 
/>
   <title>DOM positioning Test</title>
   <style type="text/css">
       .floatTest div { background: green; }
   </style>
</head>
<body style="position: relative;margin:0;padding:0;">

<div class="floatTest" style="width: 41px">
    <div style="width: 20px; float: left;">a</div>
    <div style="width: 20px; float: right;">a</div>
</div>
<div class="floatTest" style="width: 41px">
    <div style="width: 20.5px; float: left;">a</div>
    <div style="width: 20.5px; float: right;">a</div>
</div>
<div class="floatTest" style="width: 41px">
    <div style="width: 50%; float: left;">a</div>
    <div style="width: 50%; float: right;">a</div>
</div>
<div class="floatTest" style="width: 41px">
    <div style="width: 21px; float: left;">a</div>
    <div style="width: 21px; float: right;">a</div>
</div>

</body>
</html>

Received on Tuesday, 1 July 2008 09:44:14 UTC