針對HTML/CSS的跨瀏覽器優化

大約3周前我開始使用HTML/CSS，所以我仍然是一個新手。我真的把自己投入到這件事上，而且這項工作真的讓我感到滿意:)在掌握了基本知識之後，我想在全新的水平上提出挑戰，並提供了一位朋友爲他編寫一個網站。他完全想到了，我開始像瘋子一樣編碼。現在我非常喜歡，並且意識到我沒有做過任何跨瀏覽器測試。整個網站在Chrome瀏覽器中查看，Firefox的100％縮放比Chrome大125％。針對HTML/CSS的跨瀏覽器優化

我記錄我的屏幕澄清我的意思：https://www.youtube.com/watch?v=2DKB9L3R40o

JS我從Web grabed：

動畫：animate.css和WOW.js

幻燈片：尷尬的展示臺

問題是，由於動畫，我不能只使用：

* {background-image：URL（「img/...」）;

...;

...; }

相反，我必須在HTML中添加一個img，然後調整它的大小並將其放置在CSS中。正如我之前說過的，我仍然是一個初學者，當然我的代碼看起來不像高級程序員那樣精緻。

不管怎麼說，這是我的HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Alte Brücke Mostar</title> 
    <link rel="stylesheet" type="text/css" href="animate.css"> 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    <link href='http://fonts.googleapis.com/css?family=Montez|Allura|Nothing+You+Could+Do|Arvo:400,400italic|Yanone+Kaffeesatz:400' rel='stylesheet' type='text/css'> 
    <script src="js/wow.min.js"></script> 
    <script> 
    new WOW().init(); 
    </script> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script type="text/javascript" src="js/jquery.aw-showcase.js"></script> 
    <script type="text/javascript"> 

$(document).ready(function() 
{ 
    $("#showcase").awShowcase(
    { 
     content_width:   1920, 
     content_height:   916, 
     fit_to_parent:   false, 
     auto:     true, 
     interval:    3000, 
     continuous:    true, 
     loading:    true, 
     tooltip_width:   200, 
     tooltip_icon_width:  32, 
     tooltip_icon_height: 32, 
     tooltip_offsetx:  18, 
     tooltip_offsety:  0, 
     arrows:     false, 
     buttons:    false, 
     btn_numbers:   true, 
     keybord_keys:   true, 
     mousetrace:    false, /* Trace x and y coordinates for the mouse */ 
     pauseonover:   false, 
     stoponclick:   false, 
     transition:    'hslide', /* hslide/vslide/fade */ 
     transition_delay:  0, 
     transition_speed:  1500, 
     show_caption:   'onload', /* onload/onhover/show */ 
     thumbnails:    false, 
     thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */ 
     thumbnails_direction: 'vertical', /* vertical/horizontal */ 
     thumbnails_slidex:  1, /* 0 = auto/1 = slide one thumbnail/2 = slide two thumbnails/etc. */ 
     dynamic_height:   false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */ 
     speed_change:   true, /* Set to true to prevent users from swithing more then one slide at once. */ 
     viewline:    false, /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */ 
     custom_function:  null /* Define a custom function that runs on content change */ 
    }); 
}); 

</script> 
<body> 
<div id="container" class="wow fadeInLeft" > 

<header id="head"> 
    <h1 class="wow fadeInRight">Mostar Alte Brücke</h1> 
    <nav id="navigation"> 
     <p><a href="index.html">Home</a> | <a href="bosnisch.html">Bosnische Küche</a> | <a href="speisekarte.html">Speisekarte</a> | <a href="about.html">Über uns</a> | <a href="contact.html">Kontakt</a> | <a href="location.html">Anfahrt</a></p> 
    </nav> 
</header> 
<div id="food"> 
    <div id="showcase" class="showcase"> 
    <div class="showcase-slide"> 
     <div class="showcase-content"> 
      <div class="showcase-content-wrapper"> 
      <img src="img/food3.jpg" alt="Kaviar"> 
      </div> 
     </div><!--Ende showcase-content--> 
    </div><!--Ende showcase-slide--> 

    <div class="showcase-slide"> 
     <div class="showcase-content"> 
      <div class="showcase-content-wrapper"> 
      <img src="img/food4.jpg" alt="Huhn"> 
      </div> 
     </div><!--Ende showcase-content--> 
    </div><!--Ende showcase-slide--> 

    <div class="showcase-slide"> 
     <div class="showcase-content"> 
      <div class="showcase-content-wrapper"> 
      <img src="img/food5.jpg" alt="Stew"> 
      </div> 
     </div><!--Ende showcase-content--> 
    </div><!--Ende showcase-slide--> 

    <div class="showcase-slide"> 
     <div class="showcase-content"> 
      <div class="showcase-content-wrapper"> 
      <img src="img/food6.jpg" alt="Faschiertes"> 
      </div> 
     </div><!--Ende showcase-content--> 
    </div><!--Ende showcase-slide--> 

    </div><!--Ende showcase--> 



    </div><!--Ende showcase--> 

</div><!--Ende Container--> 


</body> 
</html>

這裏是CSS要與它：

*{ 
font-family: 'Yanone Kaffeesatz', sans-serif; 
text-align: center; 
overflow: hidden; 
margin: 0; 
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility ; 
} 
#head{ 
margin-top: 10%; 
padding: 10px 32% 0 32%; 
    position: fixed; 
    /*background-color: #e4e4e4;*/ 
    z-index: 2; 
} 
h1{ 
    font-family: 'Montez'; 
    font-size:75px; 
    margin: 0 0 -10px 0px; 
    color:#c0392b; 
    font-weight: bold; 
     text-shadow: 2px 2px black; 
} 
#navigation{ 
    font-size: 35px; 
    text-shadow: 2px 2px 3px black; 
} 
#navigation a{ 
    color: #c0392b; 
    font-weight: bold; 
} 
#food{ 
    max-width:110%; 
    max-height:120%; 
    z-index: -1; 
    margin: -40px; 
    margin-top: -50px; 
}

長話短說：我能做些什麼來改變我的代碼，使其充滿所有瀏覽器上的整個屏幕？

來源

2014-11-02 iMrFelix

@iMrFelix一起開始了「菜鳥」這是一個偉大的代碼結構，
當我開始了，跨瀏覽器的測試是地獄對我來說，我打了一個完整的網站在Firefox和測試後來意識到這是不成比例的鉻&互聯網瀏覽器，以解決這個我下載的瀏覽器堆棧，瀏覽器堆棧可以幫助您跨瀏覽器測試，而無需下載另一個瀏覽器。

至於CSS背景，你需要告訴你的CSS文件，其中的圖像是從是 css文件不從當前HTML文檔的位置。
所以如果thecurrent HTML文檔是在根文件夾，你的CSS是在/CSS文件夾，你需要寫：

background-image:url('../img/location/to/your-bg.png');

來源

2014-11-02 21:56:45 Millzie

感謝您的快速回復！我知道CSS背景屬性，但它不適用於我的網站，因爲如果我將背景應用於所有頁面（*在CSS中），所有動畫都會得到奇怪的背景，所以當文本飛入，文字的邊緣有一些背景。否則，它會很容易:) – iMrFelix 2014-11-03 14:27:00

嘗試不重複背景或背景大小的封面。 – Millzie 2014-11-03 15:38:44

針對HTML/CSS的跨瀏覽器優化

回答

相關問題