Geek asks and answers

Why do browsers replace the width value assigned by css?

When I assign a basic style to all selections, for example.

width: 300px;
padding: 0;
margin: 0;
border-width: 1px;

I get unexpected results when getting width through javascript under different circumstances.

  • When select is displayed , with 298px .
  • When select: none is displayed , the width is also 298px (ff, jQuery)
  • When selected in a div with a display: none , the width is correct 300px .

(The result is also the same as the destination: box-sizing: border-box)

Well, the extracted width is sometimes different from the browser and javascript structure used, but overall I just want to get the assigned width (300 pixels). (I assume this is due to the “formal oddity” outlined here: http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/ , but why don't browsers use the widths assigned by the user?)

How to get the given width? Is there any way to do this?

Examples:

http://jsfiddle.net/ETCcH/5/ (for using jquery or replacing 5 with 4 for an example using mootools)

(view and try in different browsers)

+5
source share
4 answers

, css. JavaScript css, -.

, , "" , 300 overflow: hidden - .

+2

, . 0, 300 . 300 , , . offsetWidth ( 0, none).

+2

, . : content-box; select jquery .

Jquery "", , . : border-box, .

Ernoriel

0

CSS.

.css() jQuery, . , , .

, ( , ). . , select, div, .

1. , , , - ? , (, , , , ), . .

2. , , , document.styleSheets cssRules . Chrome, cssRules , Firefox , .

, , :

box-sizing, , , ( 300 + = 302 ).

If not one of them is sailing your boat, it may be her time to sit down and think (and explain!) What you want to do and why. Whenever I find that I want to do non-standard things for simple tasks, it’s not rare, because my solution may not be optimal, and I need to zoom out a bit before continuing.

0
source

More articles:


All Articles