圖像在 Firefox 中看起來不太好，因為它在 chrome 中看起來
[英]image not looking good in firefox as it looks in chrome
問題描述
我遇到的問題是我的 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 中的圖像？
1 個解決方案
解決方案1
0 已采納 2020-02-11 13:56:11
您可以為此使用 css 網格。
li.list-item {
display: grid;
align-items: center;
grid-template-columns: min-content 1fr;
}
無法弄清楚為什么這個頁面在Firefox中看起來很糟糕？ 在Chrome / IE中看起來不錯
[英]Can't figure out why the page looks horrible in Firefox? Looks good in Chrome/IE
我為訂閱表單編寫了一個樣式。 它在firefox中看起來不錯。 但是歌劇中的風格看起來並不相似。 怎么解決？
[英]I write a style for a subscribe form. It's looks good in firefox. But style is not looking similar in opera. How to fix it?
為什么此圖像不能在Internet Explorer中融合到背景中（在Firefox或Chrome中看起來還不錯）？
[英]Why doesn't this image blend into background in Internet Explorer (it looks fine in Firefox or Chrome)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
表格在Firefox中看起來不錯，但在Chrome中卻一團糟
用戶界面在 Chrome 中看起來不錯，但在 firefox 中受到干擾
在Chrome和IE上看起來不錯…在Firefox上不好？
無法弄清楚為什么這個頁面在Firefox中看起來很糟糕？ 在Chrome / IE中看起來不錯
Inputbox在Firefox和Chrome中看起來有所不同
在 Firefox 中看起來不錯但在 IE 中看起來不錯的表格
我為訂閱表單編寫了一個樣式。 它在firefox中看起來不錯。 但是歌劇中的風格看起來並不相似。 怎么解決？
為什么此圖像不能在Internet Explorer中融合到背景中（在Firefox或Chrome中看起來還不錯）？
網站在Firefox中看起來很棒，在Chrome中看起來很糟糕
設計在Chrome中看起來很完美，在Firefox中已被破壞
相關標簽