以下代码在Firefox中是如此,但在IE中则不然。
我需要在屏幕上正确居中div - 现在,div太过于倾斜了
我还需要将此div(id =“loading”)设为覆盖整个窗口 - 并取消所有点击以防止其他地方点击。
需要与IE兼容。
HTML
<html>
<head>
<title>Overlay</title>
<link href="loading.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="loading.js"></script>
</head>
<body>
This paragraph is for testing
<br/>
Hello world!
<br/>
How are you?
<br/>
Be happy!
<br/>
<input id="cmd" type="button" value="Test" />
</body>
</html>
CSS
#loading {
background-color: black;
background-color: rgba(1, 1, 1, 0.7);
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
}
#loading_box {
width: 150px;
height: 35px;
border: 5px solid #FFFFFF;
padding: 5px;
text-align: center;
margin-top: 50%;
margin-left: 50%;
position: relative;
top: -15.5px
}
#loading_img {
width: 31px;
height: 31px;
}
#loading_txt {
color: #49a0dc;
font-weight: bold;
margin-left: 0.5em;
font-family: "Arial Black", Gadget, sans-serif;
}
答案 0 :(得分:2)
使用:
#loading_box {
position: absolute;
top: 50%;
left: 50%;
margin-top: -17px;
margin-left: -75px;
}
而不是position: relative;
元素上的margin
和#loading_box
s。使用它们将更难以获得你想要的效果。
答案 1 :(得分:1)
您的doctype不正确并将IE置于怪癖模式。请改用这个,看看我们的立场:<!DOCTYPE html>