Что может заставить элемент правильно отображаться в Firefox, но не в Chrome или Safari?

У меня есть страница, на которой я добавил модалы. Теперь нижний колонтитул не отображает серый фон. Эта проблема не влияет на другие страницы. И все работает нормально. Единственная проблема заключается в том, что фоновое изображение не отображается.

||Chrome слева ||--------------------------------------- ||Firefox справа ||

Ссылка: http://www.ios3d.com/dental-equipment/dental-mill.aspx

Раньше у меня была эта ошибка, и мне не хватало закрывающего div. Я бросил div перед нижним колонтитулом, и именно тогда я помню, что он исправлен для Firefox, который, как я знаю, небрежный, но он должен быть функциональным, пока я рефакторинг.

Код для этой страницы:

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->  <!--<![endif]-->

 
 <!-- Set the viewport width to device width for mobile -->
 
 <title>Dental Mill - Open Source Dental Milling Unit</title>
 
 
<!-- Styles and Scripts
================================================ -->
<!--#include file="/_includes/template/head-styles-scripts.html" --> 
  
  
 <!--[if IE]>
 <style type="text/css">
 .timer { display: none !important; }
 div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
 </style>
 <![endif]-->
 

 
 <!--[if lt IE 9]>
 <script src="http://www.glidewelldental.com/applications/Glidewell.HTML5/js/html5shiv.js"></script>
 <script src="http://www.glidewelldental.com/applications/Glidewell.HTML5/js/respond.js"></script>
 <![endif]-->
 

 <!-- Run the plugin -->
 


<!-- Header
================================================ -->
<!--#include file="/_includes/template/header.html" --> 

<!-- Region 3 Wrap -->
 <div> 
 <!-- Content Top --> 
 <div>
 <div>
 <ul>
 <li><a href="." title="Dental Scan Solution" target="_blank">IOS Solution</a></li>
 <li><a href="." title="Dental Mill Solution" target="_blank">TS150 Milling Solution</a></li>
 </ul>
 </div>
 </div>
 <!-- End Content Top -->
 </div>
<!-- End Region 3 Wrap -->


<!-- Region 4 Wrap -->
 <div>
 <div> 
 <div>
 <div> 
 <div> 
 <div>
 <h2>TS150<sup>™</sup> In-Office Milling Solution</h2> 
 <h2>Affordable Same-Day Dentistry</h2>
 </div>
 </div> 
 </div><!-- end of page_title-->
 </div>
 <!-- Main Content --> 
 <div>

 <!-- Begin Article -->
 <div> 
 <div> 
 <p>
 The TS150<sup>™</sup> Mill provides convenient milling that could reduce your turnaround time to fewer than three hours. The TS150 is a fast, efficient and affordable open-source milling unit featuring a powerful air-driven 150,000 RPM spindle. Its orbital precision milling strategy provides excellent marginal integrity. Use the TS150 to mill materials such as Obsidian<sup>™</sup>, Lava<sup>™</sup> Ultimate and BruxZir<sup>®</sup> Solid Zirconia.
 </p> 

 <div id="millDemo">
 <a href="#" data-reveal-id="millAnimation" target="_blank">
 
 </a> 
 </div>

 </div> 
 </div>
 <!-- End Article --> 

 <!-- Begin Article -->
 <div> 
 <div> 
 <div> 

 <!-- Main Slider --> 
 <div id="cbp-fwslider">
 <ul>
<!-- // // // // // // // // // // --> 
 
<!-- // // // // // // // // // // --> 
 
<!-- // // // // // // // // // // --> 
 
<!-- // // // // // // // // // // --> 
 
<!-- // // // // // // // // // // --> 
 
<!-- // // // // // // // // // // --> 
 </ul>
 </div> <!-- end of cbp-fwslider -->
 <!-- End Main Slider -->

 </div> <!-- end article_content --> 
 </div> <!-- end twelve columns-->
 </div> <!-- end row -->
 <!-- End Article --> 

 <!-- Begin Article -->
 <div id="materials"> 
 <div>
  
 </div> 

 <div>
 <h2>Materials</h2> 
 </div> 

 <div>
 
 </div> 

 <div>
 
 
 <p>Obsidian<sup>™</sup> lithium silicate ceramic is a new glass ceramic material indicated for the fabrication of full-contour crowns, 3-unit anterior bridges, veneers, inlays and onlays. Unlike layered ceramic or porcelain-fused-to-metal restorations, Obsidian ceramic restorations are resistant to chipping due to their monolithic composition and average flexural strength of 373 MPa.</p>
 <ul>
 <li>Exceeds the strength requirements for cemented all-ceramic restorations and can also be bonded when desired</li>
 <li>Resists chipping compared to a layered ceramic or PFM restoration</li>
 <li>Available in all VITA Classical and Bleached shades</li>
 </ul>
 <a href="http://www.glidewelldental.com/dentist/services/all-ceramics-obsidian.aspx" target="_blank">More Info</a> 
 </div> <!-- end six columns-->

 <div> 
 
 
 <p>Lava<sup>™</sup> Ultimate Restorative is a resin nano ceramic material that offers amazing esthetics, strength and unique functionality. The impressive durability of resin nano ceramic CAD/CAM material results from its high flexural strength and fracture toughness. Nanotechnology on the inside means a beautiful, long-lasting polish on the outside.</p>
 <ul> 
 <li>Less wear to opposing dentition than glass ceramics</li>
 <li>Absorption of chewing forces which reduces stress</li>
 <li>Fast, no firing and easy to mill</li>
 </ul>
 <a href="http://solutions.3m.com/wps/portal/3M/en_US/3M-ESPE-NA/dental-professionals/products/category/digital-materials/lava-ultimate/" target="_blank">More Info</a> 
 </div> <!-- end six columns-->

 </div> <!-- end row -->

 <!-- Begin Article -->
 <div> 
 <div>
  
 </div> 
 <!-- Mill Video --> 
 <div> 
 <div>
 <h4>IOS FastDesign Tutorial: Milling the Restoration with the TS-150 Chairside Mill</h4> 
 </div> 
 <!-- Video --> 
 <div> 
  
 </div>
 <!-- end of Video --> 
 </div>
 <!-- end of Mill video--> 
 </div>
 <!-- End Article --> 
 </div>
 <!-- End Main Content -->


 <!-- Sidebar Left -->
 <div> 
 <div id="sidebar-product-image"> 
 <h3>TS150 Mill</h3> 
 
 </div>
 <!-- product links and Call to action
 ================================================ -->
 <!--#include file="/_includes/template/product-pages/product-links-contact-rep.html" --> 
 </div> 
 <!-- End Sidebar Right --> 
 </div> <!-- end row-->
<!-- // // // // // // // // // // -->
 <div>
 <div>
 
 </div>
 </div>
<!-- // // // // // // // // // // --> 
 </div>
<!-- End Region 4 Wrap -->



 <!-- added to test -->

<!-- Footer
================================================ -->
<!--#include file="/_includes/template/footer.html" --> 



<!-- Back To Top -->
 <a href="#" target="_blank">Scroll</a>
<!-- End Back To Top -->
<!-- Initialize JS Plugins -->
 
 
 
 


<!-- For Animation of the Milling Machine
================================================ -->
<div id="millAnimation">
 <div id="iama-1">
 
 <nav>
 <p>Menu</p>
 
 </nav>
 </div>
 ×
</div>
1 ответ

Safari и Chrome используют WebKit, Firefox - нет.

У вас есть атрибут css, определенный для всех элементов:

*
{
 ....
 -webkit-backface-visibility: hidden;
 ....
}

Это вызывает вашу проблему. Если вы удалите этот атрибут, он исправит вашу проблему, но я не уверен, есть ли другая причина, по которой у вас есть этот атрибут, и поэтому я не уверен, что это приведет к другим проблемам.

Другое исправление - попытаться перезаписать это только для необходимых элементов. Я заметил, играя вокруг, что вы можете сделать это, просто добавив этот css в тело:

body
{
 -webkit-backface-*********: visible !important;
}

Однако, поскольку тело лежит в основе большинства ваших HTML-элементов, это также может быть навязчивым. И это еще более навязчиво, если этот css делится на несколько файлов. Если это так, вы можете добавить класс в тело, а затем сделать что-то вроде..

body.backface_visible
{
 -webkit-backface-visibility: visible !important;
}

licensed under cc by-sa 3.0 with attribution.