Jquery HTML/CSS的跨浏览器优化_Jquery_Html_Css_Browser_Zooming

Jquery HTML/CSS的跨浏览器优化

jquery html css browser

Jquery HTML/CSS的跨浏览器优化,jquery,html,css,browser,zooming,Jquery,Html,Css,Browser,Zooming,大约3周前我开始使用HTML/CSS，所以我还是个新手。我真的投入其中了，这项工作对我来说真的很有回报：）在掌握了基本知识后，我想在一个全新的层面上挑战，并让一位朋友为他编写一个网站。他对这个想法了如指掌，我开始像个疯子一样编写代码。现在我已经非常了解了，并且意识到我还没有做过任何跨浏览器测试。整个网站使用chrome浏览器，Firefox浏览器的100%放大率约为chrome浏览器的125% 我记录了我的屏幕以澄清我的意思：我从网上抓到的JS：动画：animate.css和WOW.js 幻

大约3周前我开始使用HTML/CSS，所以我还是个新手。我真的投入其中了，这项工作对我来说真的很有回报：）在掌握了基本知识后，我想在一个全新的层面上挑战，并让一位朋友为他编写一个网站。他对这个想法了如指掌，我开始像个疯子一样编写代码。现在我已经非常了解了，并且意识到我还没有做过任何跨浏览器测试。整个网站使用chrome浏览器，Firefox浏览器的100%放大率约为chrome浏览器的125%

我记录了我的屏幕以澄清我的意思：

我从网上抓到的JS：

动画：animate.css和WOW.js

幻灯片：尴尬的展示

问题是，由于动画的缘故，我不能只使用：

*{背景图片：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>

长话短说：我能做些什么来改变我的代码，使它在所有浏览器上占据整个屏幕？

@iMrFelix对于一个“新手”来说，这是一个很好的代码结构，
当我刚开始的时候，跨浏览器测试对我来说是地狱，我在Firefox中测试了整个网站，后来意识到它在chrome和internet explorer中是不成比例的，所以为了解决这个问题，我下载了浏览器堆栈，浏览器堆栈可以帮助您进行跨浏览器测试，而无需下载其他浏览器

至于CSS背景，您需要告诉您的CSS文件图像的来源，CSS文件不是当前HTML文档的位置。
因此，如果当前HTML文档位于根文件夹中，而css位于/css文件夹中，则需要编写：

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

谢谢你的快速回复！我知道css background属性，但它不适用于我的网站，因为如果我将背景应用于css中的所有页面（*），所有动画也会获得奇怪的背景，因此当文本飞入时，文本两侧会挂起一点背景。否则很容易：）尝试在背景或背景大小的封面上不重复。
background-image:url('../img/location/to/your-bg.png');