diit.form.Button: <p> around diit.form.Button breaks rendering in IE

[nonken]

in tests/form/test_Button.html put a <p> around a button.

<p>
<button id="1465" dojoType="dijit.form.Button" onClick='console.log("clicked simple")' iconClass="plusIcon">
Create
</button></p>

This breaks IE but shouldn't since buttons are allowed in <p> tags

[bill]

I was able to make this problem go away by changing all the <div> tags in the button template to <span> tags. Button still seemed to render correctly (on IE anyway) but it would need more testing.

I'm just thinking that the generated DOM, and it's surrounding nodes, are pretty strange:

<p>
   <div>
        <div>
            <button>
                 <div></div>
            </button>
       </div>
   </div>
</p>

Neither <button> nor <p> should contain <div> so it's not completely surprising that something fails.

[Douglas Hays]

(In [15093]) Fixes #7478. Changed Button template div tags to spans.

[bill]

Doug, can you update DropDownButton too? Presumably that has the same problem. (And maybe ComboButton too, although that's using a table)

[Douglas Hays]

(In [15099]) Fixes #7478. Changed DropDownButton? template div tags to spans. Left ComboButton? template as-is since it uses a table tag and does not cause IE to throw an exception.