Your location:Tech News>News>Script>Solution hover when multi-line arrangement picture frame add up crowded picture compatible IE7 +

Latest News

Solution hover when multi-line arrangement picture frame add up crowded picture compatible IE7 +

Author:fsadmin

Views:

  problem:

  The face of rows and columns arranged pictures, hover the border will add up pushed away the image below

  ================================================== ==========

  note:

  IE11 browser loads the following default picture will add to it a border of 1px

  Solution: Set the picture border: none

  ================================================== ===========

  hover add borders Solution:

  original:

  Copy the code code is as follows:

  

  •   

      

      

      

  •   1. The elements of a transparent border (recommended):

      Copy the code code is as follows:

      li {

      border: 2px solid transparent;

      }

      li: hover {

      border: 2px solid red;

      }

      2. Then wrapped in an outer layer of the element div

      After the change:

      Copy the code code is as follows:

      

  •   

      

      

      

      

      

  •   style:

      Copy the code code is as follows:

      li {

      wdith: 468px;

      }

      div {

      width: 468px;

      margin: 2px;

      padding: 10px;

      background-color: #fff;

      }

      div: hover {

      margin: 0;

      border: 2px solid red;

      }

      In addition:

      Does not support the use of outline IE 7,8.

      But it is not adding a border to display the elements in the above elements.IE is not considered compatible with the outline may be replaced by a direct border

    Recommend article

    Relate article