Search code examples
internet-explorercode-inspection

formal process for troubleshooting CSS issues in IE

Is there a way to see margin/padding/block boundaries in Internet Explorer code inspector, as Chrome has?

Troubleshooting a discrepancy in display between Chrome and IE is not easy when IE provides no visual aids in the view port when selecting elements in code inspector.

Edit: I've found the Layout tab on the right hand side of Dom Inspector in IE11, but I can't easily see what is causing the following discrepancy on this page;

Chrome:

enter image description here

Internet Explorer:

enter image description here

Note the Click Here text is misplaced in IE?

I don't know a formal process for troubleshooting CSS issues in IE.

Edit2: I now see that the image behind the text Click Here is wider/taller in IE, which moves the dark blue box down, causing the text to display at the top of the dark blue box.

Solution

  • F12, dom explorer, on right panel choose Disposition tab (the 3th) :)

    enter image description here