个人中心
gpt4 book ai didi

css - 垂直居中几乎适用于所有浏览器，但不适用于 IE7

转载 作者：行者123 更新时间：2023-12-02 07:47:20 25 4
gpt4 key购买 nike

这实际上是关于我的简单页面(有一天将被真实内容替换)、用于垂直居中的 HTML+CSS 样板和 IE7 的两部分问题。

http://engitize.net/

  1. 任何人都可以详细解释为什么页面在非 IE 浏览器(Chrome、Fx、Opera)中正确显示，几乎所有半新到最近的 IE(IE5.5、IE6、IE8、IE9)，但在 IE7 中没有？

    我特别感兴趣:它在 IE6 中有效，但在 IE7 中无效，因为...某种解释。

  2. 应该改变什么使div#c在 IE7 中正确垂直居中？
    我正在为 div#c 使用特定高度，但使用的样板与高度无关，修复应保留此功能。

    破坏其他浏览器不是一种选择，除非它是 IE5.5(好吧，IE6 也是，但前提是它真的不可避免)。

    正在更改 <!DOCTYPE html>并且将 IE 转为 quirks 模式也不被接受(这对于新开发的页面来说是一种非常糟糕的做法)。

如果你没有IE7(和我一样)，你可以访问http://ipinfo.info/netrenderer/或 http://browserling.com/ ，将 URL 粘贴到那里并选择 IE7 以自行查看问题。

因为页面在接受一些答案后会发生变化，所以我提供了相关 HTML 和 CSS 部分的快照( Logo URL 更改为绝对 URL)。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html, body { height: 100%; }
body { background-color: #fff; color: #000; margin: 0px; padding: 0px; }
div { margin: 0px; padding: 0px; }
#outer { position: relative; width: 100%; height: 100%; overflow: visible; }
#outer[id] { display: table; position: static; }
#middle { position: absolute; top: 50%; width: 100%; text-align: center; } /* for explorer only*/
#middle[id] { display: table-cell; vertical-align: middle; position: static; }
#c { position: relative; top: -50%; } /* for explorer only */
#c { width: 385px; height: 120px; margin-left: auto; margin-right: auto; }
#c { background-image: url(http://engitize.net/engitize.png); background-repeat: no-repeat; background-position: center top; }
#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }
#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; } 
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }
a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }
</style> 
</head>
<body>
<div id="outer"><div id="middle"><div id="c"><div> 
because history is important!
</div></div></div></div> 
<div id="footer"><div> 
<p style="float:left;"><strong>Przemysław Pawełczyk</strong>'s imprint | Coming in 2012!</p> 
<p style="float:right;"><a href="http://przemoc.net/">Przemoc's network</a></p> 
</div></div>
</body>
</html>

最佳答案

您的 Q#1 是 answered by @thirtydot , IE7 及以下不支持 CSS 表格属性，因此必须为它们找到另一种方法。并且他的绝对定位技术通常是执行此操作的首选方法，因为在大多数情况下(启动页面？)居中内容的宽度和高度都是已知的。

以上评论的附录:为了回答为什么它在 IE6 而不是 IE7 中工作，即使 IE6 也不支持表属性，IE7 实际上是在拾取 position: static。来自 #middle[id] {} 的规则规则 - IE7 确实理解这种类型的选择器，所以这意味着后来的绝对/相对定位无法像在 IE6 中那样工作

考虑到上述情况，重做 CSS 以确保 IE7 和 6 获得相同的 CSS，并且稍后将其放置在级联中以覆盖“好”CSS 结果表明定位方法也是高度不可知的，在评论有各种链接来测试这个，但这是最终的工作版本:

混合表格单元格/定位方法:here

那个 fiddle 确实包括图像的宽度和高度，但是如果你删除它们和“子文本”的定位它确实(或应该)显示中间的任何东西都保持居中

HTML 使用的与此答案的底部相同。减去 额外的 <i></i>元素

CSS:

html, body { height: 100%; margin: 0; padding: 0;}
body { background-color: #fff; color: #000;  }

#outer {
    position: relative;
    width: 100%;
    height: 100%;
    display: table;
}

#middle { 
    display: table-cell; 
    vertical-align: middle;
    text-align: center;
}

#c {
    width: 385px;
    height: 120px;
    margin: 0 auto;
    background: url(http://engitize.net/engitize.png) no-repeat 50% 50%;
}

/**** for IE7 and below ****/
/* hacks but there is another method below */
#middle {
  *position: absolute;
  *top: 50%;
  *width: 100%;
  *text-align: center;
  }

#c {
  *position: relative;
  *top: -50%;
}

/**** end IE7 and below rules ****/


#c div {
    position: relative;
    top: 100px;
    width: 100%;
    color: #666;
    font-weight: bold;
    font-family: serif;
    font-size: 12px;
    text-align: right;
}

#footer {
    width: 100%;
    text-align: center;
    height: 15px;
    padding: 5px 0 0 0;
    margin: -20px auto 0 auto;
    border: 0;
    background-color: #def;
}
#footer div {
    padding: 0px 5px 0px 5px;
    text-align: right; font-size: 10px;
    font-family: sans-serif;
}
#footer p {margin: 0;}

正如在使用 HTML5 样板文件用于有条件地对 HTML 元素进行分类的技术的评论中所指出的，请参阅:

Conditional stylesheets vs CSS hacks? Answer: Neither!

意味着您可以将 IE7 hack 替换为:

.ie6 #middle, .ie7 #middle {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
}

.ie6 #c, .ie7 #c {
  position: relative;
  top: -50%;
}

原创替代品——“火柴法”

您可能会通过条件注释或 hack 将以下技术与“table-cell”技术混合使用，但就我的测试而言，这种(hacky!)技术适用于跨浏览器

正如您要求高度不可知的版本。您可能喜欢也可能不喜欢“火柴棒”技术，这涉及使用内联 block 并将它们排成一行。“火柴棒”是 100% 高的空，关闭页面，垂直对齐设置为“中间”的内联 block 元素一旦就位，下一个内联 block (您的实际内容 div)位于它旁边并与中间或它对齐，然后使用 text-align: center;在它上面你也有水平居中

这里有一个链接到工作 example fiddle

注意:我保留了你的宽度不变，但你可以通过删除高度和宽度来测试没有宽度/高度的 #c并删除 #c div 的 CSS文本 div - 在纯文本场景中，将文本输入到这些 div 中的任何一个都应该“自动”居中。

特别注意插入额外的 <i></i> HTML 位于外部 div 内(这可能就是为什么这不是首选方法!)，这是支撑整个页面打开的“火柴棒”。

fiddle 中使用的代码:

html, body { height: 100%; margin: 0; padding: 0; }
body { background-color: #fff; color: #000; }

#outer { position: relative; width: 100%; height: 100%;}

/* a matchstick spacer */
#outer i {
 display: inline-block; 
 height: 100%; 
 width: 1px; 
 margin-left: -1px; /* to hide off page */
 margin-right: -4px; /* to remove spacing between this and #middle block */
 vertical-align: middle; /* will make inline block next to it center vertically */
 background: #f00; /* red, not required just to see or not see it */
 }

#middle { 
  display: inline-block;
  width: 100%;
  text-align: center;
  vertical-align: middle;
} 

/* image 385 * 120 */
#c { 
  display: inline-block;
  /* presuming image heights, but it wouldn't matter if there was width/height here or not */
  width: 385px; 
  height: 120px; 
  background: url(http://engitize.net/engitize.png) no-repeat 50% 50%; 
}

#middle, #c { /* IE hack for inline block on block level elements */
 *display: inline; 
}


#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }

#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; } 
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }

a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }

HTML:

<div id="outer">
  <i></i>
  <div id="middle">
      <div id="c"><div>
        because history is important!
      </div></div>
  </div>
</div>

<div id="footer">
  <div>
   <p style="float:left;"><strong>Przemys?aw Pawe?czyk</strong>'s imprint | Coming in 2012!</p>
   <p style="float:right;"><a href="http://przemoc.net/">Przemoc's network</a></p>
  </div>
</div>

关于css - 垂直居中几乎适用于所有浏览器，但不适用于 IE7，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5993721/

25 4 0
文章推荐： php - (isset($someValue) && ($someValue != '' )) 与 !empty($someValue) - 它们相同吗？
文章推荐： PHP 和问题
文章推荐： php - 检查 Twitter API 是否已关闭(或者整个站点是否已关闭)
文章推荐： ms-access - 将 Access 97 文本字段的默认值设置为空字符串
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com