威尼斯www.9778.com-威尼斯正版官方网站

如何做兼容各浏览器的垂直居中-背景在窗口中

日期:2020-01-23编辑作者:编程人生
  • 如何做兼容各浏览器的垂直居中-背景在窗口中
  • 如何做兼容各浏览器的垂直居中-div 在窗口中

学习资料

  • 如何做兼容各浏览器的垂直居中-背景在窗口中
  • 如何做兼容各浏览器的垂直居中-div 在窗口中

要求

展现广告的位置固定在页面的右侧中间位置;


body
{
    background-image:url("images/bg.gif");
    background-attachment:fixed;
    background-position:center center;
    background-repeat:no-repeat;
}

知识点

1.IE6不兼容position:fixed;的解决方案

position: fixed;

_威尼斯正版官方网站,position: absolute;/*IE6不兼容fixed*/

2. 解决抖动的方案

body {

/*解决抖动:背景固定*/

background-image: url();

background-attachment: fixed;

}

3.屏幕可视区域的获取

//javascript

document.documentElement.clientHeight

document.documentElement.clientWidth

//jQuery

$(window).height();

S(window).width();

4.元素实际尺寸的获取

//JavaScript

obj.offsetHeight

obj.offsetWidth

//jQuery

outerHeight()

outerWidth()

5.浏览器版本检测

window.navigator.userAgent.toLowerCase().indexOf('IE 6.0')

6.滚动高度的获取

document.documentElement.clientHeight || document.body.scrollTop;

7.滚动条滚动事件

scroll

8.其他

获取览器显示区域的高度 : $(window).height();

获取浏览器显示区域的宽度 :$(window).width();

获取页面的文档高度 :$(document).height();

获取页面的文档宽度 :$(document).width();

获取滚动条到顶部的垂直高度 :$(document).scrollTop();

获取滚动条到左边的垂直宽度 :$(document).scrollLeft();

以前,我们在 IE 中,可以在外面套一个 100% width、100% height 的表格,然后将单元格设置成 valign="middle",就实现了垂直居中了。可是自从其他浏览器出来后,我们发现标准并不是那么回事。

我们平时都没有使用 background-attachment:fixed; 这一句,如果少了这句,那么在 Firefox 等浏览器中,背景图片将无法实现垂直居中。

实现思路

1.获取广告位容器的实际高度;

2.获取屏幕可视区的高度;

3.计算居中的位置;

4.兼容性解决;

原因是:如果没有指定高度,那么它的高度就是 0(除非有内容将其撑大),没有为 body 指定 height,那么它的值就是 0,那么表格的 100% height 就相当于 0 了。

在 IE、Firefox 中测试通过。

Demo代码

解决办法

  • 如何做兼容各浏览器的垂直居中-背景在窗口中
  • 如何做兼容各浏览器的垂直居中-div 在窗口中

HTML

<div class="box"></div>

#loginPanel
{
    position:absolute;
    top:50%;
    left:50%;
    margin:-150px 0px 0px -200px;
    width:400px;
    height:300px;
    background-color:#FFFFFF;
    color:#000000;
}


CSS

body{height:3000px;}

.box{

/*解决抖动的问题*/

position:fixed;_position:absolute;/*IE6不兼容fixed*/right:0;top:0;width:200px;height:200px;line-height:200px;background-color:orangered;color:#fff;text-align:center;}

body{

/*解决抖动:背景固定*/

background-image:url();background-attachment:fixed;}

position、top、left 实现 loginPanel 的左上角顶点居中,而 margin-top、margin-left 是根据 height、width 除以 2 得出来的,目的是让 loginPanel 的中间在窗口的中间。

JS

$(function() {

/* 盒子的实际尺寸:本身高度+上下边框+上下的内边距 */

variBoxH =$('.box').outerHeight();

/* 获取可视区的高度 */

variClientHeight =$(window).height();

/* 居中定位: (屏幕可视区域的高度 - 盒子本身的高度)/2

* 即是:(可视区域 - 元素尺寸)/2*/

variPosition = (iClientHeight - iBoxH)/2;

$('.box').css('top',iPosition);

$(window).scroll(function() {

if(window.navigator.userAgent.toLowerCase().indexOf('IE 6.0') !== -1) {

variScrollTop =$(document).scrollTop();

alert(iScrollTop);

$('.box').css('top',(iPosition + iScrollTop));

}

});

});

在 IE、Firefox 中测试通过。

效果

威尼斯正版官方网站 1

中间广告位效果

  • 如何做兼容各浏览器的垂直居中-背景在窗口中
  • 如何做兼容各浏览器的垂直居中-div 在窗口中

本文由威尼斯www.9778.com发布于编程人生,转载请注明出处:如何做兼容各浏览器的垂直居中-背景在窗口中

关键词:

一起学 Microsoft AJAX Library-DomEvent

一起学 Microsoft AJAXLibrary-介绍 一起学 Microsoft AJAX Library-Array类型扩展 一起学 Microsoft AJAX Library-Boolean 和 Date类型扩...

详细>>

一起学 Microsoft AJAX Library-Sys.Net.WebRequest

if (Sys.Browser.agent == Sys.Browser.InternetExplorer) {     alert("IE"); } else if (Sys.Browser.agent == Sys.Browser.Firefox) {     alert("Firef...

详细>>

一起学 Microsoft AJAX Library-Array 类型扩展

一起学 Microsoft AJAXLibrary-介绍 一起学 Microsoft AJAX Library-Array类型扩展 一起学 Microsoft AJAX Library-Boolean 和 Date类型扩...

详细>>

jquery实现的鼠标拖动排序Li或Table-Web前端之家

想要完结的效果和职能如下: 1、前端页面 复制代码 代码如下: 广告管理 首先用 CSS 禁止使用第意气风发项的提升按...

详细>>