Jquery .val() browser differences.

Question

The Statement
With jquery if you have a button element defined as follows: <button value="123">456</button>

Browsers will give you different values if you use either .attr('value'); or .val();

---

The reason?
A <button> element is simply <input type="button"> in a shorthand.

The way you would set the value of <input type="button"> is to set value="Click Me"

Hence <input type="button" value="Click Me"> is the same as <button>Click Me</button>.

---

The Question
Why does using .val() return different values on different browser. Who is correct?
Firefox:
.val() = 123 | displayed text = 456
Chrome:
.val() = 123 | displayed text = 456
>= Internet Explorer 8:
.val() = 123 | displayed text = 456
<= Internet Explorer 7:
.val() = 456 | displayed text = 456

Answer 1

Reading over the w3 specification I'm led to believe that Chrome and Firefox are correct. Specifically because of this this snippet:

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content.

The W3 spec is referring to the information found between the <button></button> tags as content rather than value, which is what leads me to my observation. Another hint is that Internet Explorer is the only one returning a different value, and I'm fairly certain that Internet Explorer is the root of all anguish in the universe.

---

I also decided to test Safari 5, Opera, Chrome and Firefox 3.6.8 all on a Mac. All return 456 as text displayed at 123 as .val()

Answer 2

I am on IE 8.0.6001.* and it is behaving exactly like Firefox does - http://www.jsfiddle.net/AKGsd/3/

You've probably uncovered yet another bug/feature of Internet Exploiter older versions... Sigh !