在Safari中的相对定位 [英] Relative positioning in Safari
问题描述
它必须很简单，这里是我的CSS：
It has to be simple, here's my CSS:
.progressImage
{
position:relative;
top:50%;
}
.progressPanel
{
height:100%;
width:100%;
text-align:center;
display:none;
}
<asp:Panel ID="pnlProgress" runat="server" CssClass="progressPanel">
<asp:Image ID="Image1" runat="server" CssClass="progressImage" ImageUrl="~/Images/Icons/loading.gif" />
</asp:Panel>
我会根据用户操作切换面板显示。
I toggle panel display depending on user action.
在FireFox中效果非常好，但会显示在Safari的页面顶部。
Works great in FireFox, but shows up at the top of the page in Safari.
ps vertical-align：middle;也不工作。
p.s. "vertical-align:middle;" doesn't work either.
p.p.s。设置位置：相对;在面板上不工作，设置position：relative;在面板上和位置：绝对;
p.p.s. setting "position:relative;" on the panel doesn't work, setting "position:relative;" on the panel and "position:absolute;" on the image breaks it in FF and does nothing in Safari
这个工作：
.progressPanel
{
height:100%;
width:100%;
position:relative;
}
.progressImage
{
position:absolute;
top:50%;
left:50%;
}
推荐答案
c $ c> .progressPanel 到相对位置，将 .progressImage 的位置设置为absolute。以下工作对我在FF，IE，Safari。将负边距设置为图像的宽度/高度的一半，以实现完美对中。请注意，progressPanel（在这种情况下为body）的某个父级需要一个高度，以便progressPanel可以填充它。
Set the position of .progressPanel to relative, and the position of .progressImage to absolute. The following works for me in FF, IE, Safari. Set the negative margins to half the width/height of your image for perfect centering. Note that some parent of the progressPanel (body in this case) needs a height so that the progressPanel can fill it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
body {
height:700px;
}
.progressImage {
position:absolute;
top:50%;
left:50%;
margin-left:-16px;
margin-top:-16px;
}
.progressPanel {
position:relative;
height:100%;
width:100%;
text-align:center;
background:red;
}
</style>
</head>
<body>
<div class="progressPanel"><img class="progressImage" src="pic.jpg"/></div>
</body>
</html>
这篇关于在Safari中的相对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
