У меня проблема в том, что изображение на моем chrome выглядит отлично, как показано на скриншоте, представленном ниже, но в firefox оно выглядит не так, как в chrome
Так выглядит в Firefox.
И Так выглядит в Chrome.
HTML
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> --> <div class="desti-tab-row col col-sm-12 no-padding"> <ul class="nav nav-tabs"> <li class="nav-item"><a class="nav-link active safetyandsecurity" data-toggle="tab" href="#safetyandsecurity">SAFETY AND SECURITY </a></li> <li class="nav-item"><a class="nav-link comfortandconvenience" data-toggle="tab" href="#comfortandconvenience">COMFORT AND CONVENIENCE </a></li> <li class="nav-item"><a class="nav-link environmental" data-toggle="tab" href="#environmental">ENVIRONMENTAL</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane container active" id="safetyandsecurity"> <div class="row"> <div class="content-info col col-sm-6 no-l-padding"> <h3 class="red-title">SAFETY AND SECURITY</h3> <div class="container"> <div class="row"> <div class="col-sm-6"> <ul> <li class="list-item"><img class="sec_cam" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sec-cam.png"> <span>24HR CCTV MONITORING</span> </li> <li class="list-item"><img class="cctv" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/cctv.png"> <span>CCTV CONTROL ROOM</span> </li> <li class="list-item"><img class="sec_personnel" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sec-personnel.png"> <span>SECURITY PERSONNEL ON-DUTY AROUND THE CLOCK</span> </li> <li class="list-item"><img class="entry_exit" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/entry_exit.png"> <span>ENTRY AND EXIT CONTROLLED BY ACCESS CARD SYSTEM</span> </li> <li class="list-item"><img class="heigtened_rail" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/heightened-railings.png"> <span>HEIGHTENED RAILINGS</span> </li> </div> <div class="col-sm-6"> <li class="list-item"><img class="window_opening" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/windows-opening.png"> <span>RESTRICTED WINDOW OPENING SPACE</span> </li> <li class="list-item"><img class="fire_doors" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/fire-dors.png"> <span>FIRE RATED DOORS</span> </li> <li class="list-item"><img class="fire_access" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/fire-access.png"> <span>FIRE RATED ACCESS CONTROL PANELS</span> </li> <li class="list-item"><img class="fire_furniture" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/fire-furniitiure.png"> <span>FIRE RATED FURNITURE</span></li> <li class="list-item"><img class="wifi" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/wifi.png"> <span>SECURE ISOLATED NETWORKS FOR WI-FI AND CCTV</span> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="tab-pane container fade" id="comfortandconvenience"> <div class="row"> <div class="content-info col col-sm-6 no-l-padding"> <h3 class="red-title">COMFORT AND CONVENIENCE</h3> <div class="container"> <div class="row"> <div class="col-sm-6"> <ul> <li class="list-item"><img class="male_female" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/male_female.png"> <span>DEDICATED BLOCKS FOR MALE AND FEMALE RESIDENTS</span> </li> <li class="list-item"><img class="sound" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sound.png"> <span>NOISE REDUCING WALLS AND DOORS (STC RATED)</span> </li> <li class="list-item"><img class="room" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/room.png"> <span>DEDICATED ACCESS POINTS FOR EACH ROOM</span> </li> <li class="list-item"><img class="internet" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/internet.png"> <span>HIGH SPEED INTERNET</span> <li class="list-item"><img class="sweeper" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sweeper.png"> <span>FULL-TIME SANITARY AND HOUSEKEEPING SERVICES</span></li> </div> <div class="col-sm-6"> </li> <li class="list-item"><img class="digital_notice" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/digital_notice.png"> <span>DIGITAL NOTICE BOARDS ACROSS THE PROPERTY</span> </li> <li class="list-item"><img class="residence" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/residence.png"> <span>ON-SITE RESIDENT SUPPORT – COMMUNITY MANAGEMENT</span> </li> <li class="list-item"><img class="water_proof" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/waterproof.png"> <span>WATERPROOF, ANTIFUNGAL AND ANTIBACTERIAL COMFORT SPRING MATTRESSES</span> </li> <li class="list-item"><img class="myriad_app" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/myriad_app.png"> <span>THE MYRIAD APP – TO CENTRALISE ADMINISTRATION AND SERVICES SUCH AS BOOKINGS, PAYMENTS AND NOTICES</span> </li> <li class="list-item"><img class="phone" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/phone.png"> <span>IN-ROOM PHONES</span> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="tab-pane container fade" id="environmental"> <div class="row"> <div class="content-info col col-sm-6 no-l-padding"> <h3 class="red-title">ENVIRONMENTAL</h3> <div class="container"> <div class="row"> <div class="col-sm-6"> <ul> <li class="list-item"><img class="heat" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/heat.png"> <span>UV RATED WALLS – HEAT TRANSMISSION REDUCTION</span> </li> <li class="list-item"><img class="air_window" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/air_window.png"> <span>DOUBLE GLAZED WINDOWS – COOL AIR CONTAINMENT</span> </li> <li class="list-item"><img class="low_energy" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/low_energy.png"> <span>LOW ENERGY CONSUMING HEAT PUMPS</span></li> </div> <div class="col-sm-6"> <li class="list-item"><img class="solar_panel" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/solar_panel.png"> <span>SOLAR PANELS SPACE</span> </li> <li class="list-item"><img class="sensor" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sensor.png"> <span>OCCUPANCY SENSORS TO CONTROL LIGHTING AND AC – BOTH IN - ROOM AND THROUGHOUT COMMON AREAS</span> </li> <li class="list-item"><img class="shower" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/shower.png"> <span>WATER CONSERVING SHOWERHEADS</span></li> </ul> </div> </div> </div> </div> </div> </div> </div> </div><!-- Tab end row --> </div>
CSS
.list-item { margin-bottom: 20px; } .list-item img { margin-right: 10px; } li.list-item { display: flex; margin-bottom: 25px; align-items: center; } li img { margin-right: 21px; } li { display: list-item; text-align: -webkit-match-parent; }
Как я могу исправить изображения в Firefox?
Для этого вы можете использовать css сетку.
li.list-item { display: grid; align-items: center; grid-template-columns: min-content 1fr; }
демо