css focus not working in ie11

Question

    <style type="text/css">
    .main {
        position: absolute;
        border-radius: 8px;
        border: none;
        height: 54%;
        top: 35%;
        /*33%*/
        color: #FFFFFF;
        font-size: 0.7em;
        overflow: hidden;
        z-index: 50;

    }
    .test1 {
        display: inline-block;
        height: 100%;
        width: 100%;

    }
    .test2 {
        display: inline-block;
        height: 100%;
        width: 100%;
    }
    .main:focus {
        z-index: 55;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        outline: none;
        top: 20%;
    }

</style>
<div>
    <!--other element-->
    <div class="main" tabindex="0">
        <div class="test1">
            <!--other element-->
        </div>
        <div class="test2">
            <div class="abc">
                <!--other element-->
            </div>
            <div class="abc">
                <!--other element-->
            </div>
        </div>
    </div>
</div>



    .main {
            position: absolute;
            border-radius: 8px;
            border: none;
            height: 54%;
            top: 35%;
            /*33%*/
           
           
            z-index: 50;

        }
        .test1 {
            /*display: inline-block;*/
            height: 100%;
            width: 100%;
                   
        }
        .test2 {
          /*display: inline-block;*/
            height: 100%;
            width: 100%;
        }
        .main:focus {
            z-index: 55;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            outline: none;
            top: 20%;
            background-color: red;
        }
    <div>
        <!--other element-->
        <div class="main" tabindex="0">
            <div class="test1">
                <span>Info2</span>
            </div>
            <div class="test2">
                <div class="abc">
                    <!--other element-->
                    <span>Info2</span>
                </div>
                <div class="abc">
                    <span> information</span>
                </div>
            </div>
        </div>
    </div>

This code is working in chrome and Edge but not is IE 11. this work in IE 11 also ,if we click on the .main div border otherwise if we click on child element then it stop working.

I found some helpful link also https://davidwalsh.name/tabindex-focus this give me input for adding the tabindex to element.

Answer 1

If you want to focus main container when click the .main container, then you have remove the width and height of test1 & test2 classes. Style will be like,

.main {
            position: absolute;
            border-radius: 8px;
            border: none;
            height: 54%;
            top: 35%;
            /*33%*/


            z-index: 50;

        }
        .test1 {
            /*display: inline-block;*/

        }
        .test2 {
          /*display: inline-block;*/
        }
        .main:focus {
            z-index: 55;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            outline: none;
            top: 20%;
            background-color: red;
        }

Or if you want to give focus for .test1/.test2 class then use below code

.main .test1:focus {
........
}