IE11 Style Display Block issue

By | May 28, 2015
rx online

Recently Microsoft has improved the IE11 and it will now support most of the CSS howver in previous version IE has an intiligent to auto correct the styles error and inherit from parent.

For Eaxmple i come accross with one issue related with table row <tr> that to hide the same we were using style=”display:none” and to show the same back we  change the display to “block”. It worked till IE10 as per browser standard we have to use style=”display:table-row” not “display:block;” or inline

To overcome from this issue we need to change all the block to table-row however it is not easy task to do. While some research i think we can change the stylesheet with help of javascript and even we get the elements.

I wrote few lines of code and it works success, only we have to do is put the below script in your master page, If you dont have master page then you have to paste the same in all page.

<script type="text/javascript">

            function ResolveIE11CSSIssue() {
                var items = document.body.getElementsByTagName("tr");
                for (var i = 0, len = items.length; i < len; i++) {

                    var displayValue = items[i].getAttribute("style");
                    if (displayValue != null) {
                        if (displayValue.indexOf("block") > 0) {
                            items[i].setAttribute("style", "display:table-row;");
                        }
                    }
                }
            }
            ResolveIE11CSSIssue();
        </script>

Hopes you like the solution, really it will give you big rellif with minimum efforts.

Don’t forget to share or comment it will help other too

703 total views, 1 views today