我大约 3 周前开始使用 HTML/CSS，所以我仍然是一个菜鸟。我真的全身心投入其中，在我看来，这项工作确实得到了返回 :) 在掌握了基础知识之后，我想要一个全新水平的挑战，并邀请一位 friend 为他编写一个网站。他对这个想法很着迷，我开始像疯子一样编码。现在我已经很深入了，并且意识到我还没有进行任何跨浏览器测试。整个网站在 chrome 中看起来不一样，Firefox 中的 100% 缩放在 Chrome 中约为 125% 缩放。
我录制了我的屏幕以阐明我的意思:https://www.youtube.com/watch?v=2DKB9L3R40o
我从网上抓取的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>
下面是 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;
}
长话短说:我可以做些什么来更改我的代码以使其在所有浏览器上填满整个屏幕？
最佳答案
@iMrFelix 从一个很棒的代码结构的“菜鸟”开始，
当我刚开始的时候，跨浏览器测试对我来说简直就是 hell ，
我在 Firefox 中测试了整个网站，后来意识到它在 chrome 和 Internet Explorer 中不成比例，因此为了解决这个问题，我下载了浏览器堆栈，浏览器堆栈可帮助您进行跨浏览器测试，而无需下载其他浏览器。
至于 CSS 背景，您需要告诉您的 css 文件图像来自那个 css 文件的位置不是当前 HTML 文档的位置。
因此，如果当前的 HTML 文档在根文件夹中，而你的 css 在 /css 文件夹中，你需要这样写:
background-image:url('../img/location/to/your-bg.png');
关于jquery - HTML/CSS 的跨浏览器优化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26701397/