Safari 中的相对定位答案

【问题标题】：Relative positioning in SafariSafari 中的相对定位
【发布时间】：2010-09-22 09:57:52
【问题描述】：

它必须很简单，这是我的 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>

我根据用户操作切换面板显示。

在 FireFox 中运行良好，但在 Safari 中显示在页面顶部。

附言“垂直对齐：中间；”也不行。

p.p.s.设置“位置：相对；”面板上不起作用，设置“位置：相对；”在面板上和“位置：绝对；”图像上的图像在 FF 中破坏它并且在 Safari 中什么也不做

这行得通：

.progressPanel
{
  height:100%;
  width:100%;
  position:relative;
}

.progressImage
{
  position:absolute;
  top:50%;
  left:50%;
}

【问题讨论】：

标签： css safari cross-browser positioning

【解决方案1】：

确保父容器也设置为 position: relative 并具有指定的高度，否则该位置将无法正常工作。

.progressPanel
{
    height:100%;
    width:100%;
    text-align:center;
    display:none;
    position: relative;
}

另外，为什么不将面板的背景属性设置为您的 gif？

background: url('path/to/image.gif') no-repeat center middle;

这将始终居中。

【讨论】：

【解决方案2】：

将.progressPanel的位置设置为相对，.progressImage的位置设置为绝对。以下适用于我在 FF、IE、Safari 中。将负边距设置为图像宽度/高度的一半，以实现完美居中。请注意，progressPanel 的某些父级（在本例中为主体）需要一个高度，以便 progressPanel 可以填充它。

<!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>

【讨论】：

【解决方案3】：

位置规范（相对或绝对）应该在两个元素（父元素和子元素）中，否则子元素的定位不一定有效。您应该始终对元素使用相对定位，除非您指定确切的位置，例如 left: 100px;顶部：100 像素。 Vertical-align 指的是元素本身，仅涉及文本行中的位置。除非您更改它，否则 line-height 与 div 高度不同。 line-height 必须指定大于内部元素才能使垂直对齐生效。

【讨论】：