1

我需要帮助弄清楚为什么我的 div class="content" 没有在 IE7 和 IE8 中正确显示 - 在 IE9 中看起来很棒：http: //kathykroening.com/

内容应该有一个黑色的背景覆盖，但它似乎没有通过并且定位也不正确，因为标题出现在它应该在下面的顶部。

这是HTML： 

    <body class="home page page-id-81 page-template-default">

    <div id="wrapper">

        <header>
            <div class="toph">
                <h1 class="logo"><a href="http://kathykroening.com">Kathy Kroening</a></h1><!-- /.logo -->
            </div>
            <div class="bottomh">
                <nav class="main">
<ul class="inner"><li id="menu-item-194" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-81 current_page_item menu-item-194"><a href="http://kathykroening.com/">Home</a></li>
<li id="menu-item-151" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-151"><a href="http://kathykroening.com/about-kathy/">About Kathy</a></li>
<li id="menu-item-152" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-152"><a href="http://kathykroening.com/experience/">Experience</a></li>
<li id="menu-item-153" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-153"><a href="http://kathykroening.com/ideas/">Ideas</a></li>
<li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-156"><a href="http://kathykroening.com/open-house/">Open House</a></li>
<li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-155"><a href="http://kathykroening.com/cabinetry/">Cabinetry</a></li>
</ul>
                </nav><!-- /.main -->
                <nav class="crumbs">
                </nav><!-- /.crumbs -->
            </div>
        </header><!-- /header -->

        <section id="container">
                <img src="http://kathykroening.com/wp-content/uploads/2012/11/homebg.jpg" alt="" class="pagebg">



        <div class="inner">
            <div class="content">

                <p>Before color, fabric and furnishing, there’s interior architectural design – the essential space planning that literally makes room for your ultimate vision.</p>

            </div>
        </div>

        <div class="caption">
            <h2>Interior Architectural Design</h2>
        </div><!-- /.caption -->
                </section><!-- /#container -->



    </div><!-- /#wrapper -->


</body>

这是CSS：

* { margin: 0; padding: 0;}
html { height: 100%; overflow: auto;}
body { font-family: 'Questrial', sans-serif; font-size: 12/13px; line-height: 115%; }
a { text-decoration: none; outline: none !important;}

.alignleft { float: left;}
.alignright { float: right;}

#wrapper { width: 1024px; margin: 0 auto; position: relative; display: block;}
.inner { width: 900px; margin: 0 auto; position: relative; }

header { height: 215px; overflow: hidden;}
.toph { height: 150px; line-height: 150px; text-align: center;}
.logo a { display: inline-block; width: 360px; height: 96px; background: url('assets/img/logo.png') no-repeat; text-indent: -9999px; position: relative; line-height: 96px;}
.bottomh { height: 65px;}
header ul { list-style: none;}
header nav { clear: both; display: inline-block; width: 100%; position: relative;}
header nav li { float: left;}
header nav li a { text-transform: uppercase; font-size: 14px; }
nav.main { height: 35px; background: url('assets/img/mainnavbg.jpg') no-repeat; line-height: 35px;}
nav.main li { padding: 0 45px;}
nav li.first { padding-left: 0 !important; border-left: 0 !important;}
nav li.last { padding-right: 0 !important; border-right: 0 !important;}
nav.main li.last { float: right;}
nav.main a { color: #fff;}
nav.main a:hover,
nav.main li.current_page_item a,
nav.main li.current-page-ancestor a { border-bottom: 1px solid #fff; padding-bottom: 3px;}
nav.crumbs a { color: #726658; font-size: 13px;}
nav.crumbs ul { height: 13px; line-height: 13px; padding: 3px 0;}
nav.crumbs a:hover,
nav.crumbs li.current_page_item a { color: #90492d;}
nav.crumbs li {  padding: 0 10px; border-right: 1px solid #e1dedb; border-left: 1px solid #716558;}

footer { margin-top: 5px; height: 30px; line-height: 30px; clear: both; font-size: 12px; color: #797979; }

section#container { height: 550px; position: relative; display: block;}
.pagebg { position: absolute; z-index: 1; }
.pagebg.block { right: 45px;}
.content {  z-index: 999; position: absolute; left: -50px; width: 250px; height: 470px; background: rgba(0,0,0,0.8); color: #fff; padding: 40px 35px;}
.scroller { height: 500px; overflow: auto; width: 250px;}
.content.block { background: #262223;}
.content h2 { font-weight: 100; text-transform: uppercase; font-size: 21px; margin-bottom: 10px;}
.content h3 { text-transform: uppercase; font-size: 15px; font-weight: 100; padding: 3px 5px; background: #58595b; display: inline-block; margin-bottom: 10px;}
.content p { font-size: 14px; padding-bottom: 10px; }
.content a { color: inherit; text-decoration: underline; }
.content ul { list-style-position: inside;}

body.home .content p { font-size: 19px; line-height: 150%;}
.caption { background: rgba(255,255,255,.8); padding: 10px 5px; position: absolute; bottom: 20px; width: 100%; text-transform: uppercase; z-index: 9999;}
.caption h2 { width: 875px; margin: 0 auto; font-size: 17px; letter-spacing: 20px; font-weight: 100;}
4

2 回答 2

1

以下是您可以做的三件事来改善您的情况。

1）使用normalize.css而不是* { margin:0; padding:0;}css 重置。这将有助于添加对在 html5 中添加的部分、文章、标题等标签的支持。

2) 使用html5shiv这样就完成了对 ie8 和更低版本不知道的 html5 元素的支持，并允许您对它们进行样式设置。

3) 对于较低 IE 中的 rgba 支持，请查看这篇关于跨浏览器 rgba 支持的文章

添加一个很好的衡量标准，看起来您正在设计一个 wordpress 主题，我建议您按照他们的准则来格式化您的 css。 Wordpress CSS 编码标准

于 2012-12-09T00:34:52.657 回答
1

您的第一个问题是 IE bellow 9 不理解 RGBA 颜色。

解决方法是对渐变背景使用滤镜，但两边使用相同的颜色：

background-color: rgba(0, 0, 0, 0.75); /* R G B Alpha */
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#BF000000', EndColorStr='#BF000000'); /* Alpha R G B */

请注意，过滤器将前 2 个字符作为 alpha 的十六进制值，介于 00 和 FF 之间。

获得所需值的一种简单方法是进行一些简单的计算：

alpha:
    range: 0 - 1
    value: 0.75

hexa:
    range: 00 - FF = 0 - 255
    value: 0.75 * 255 = 191 = BF

要从十进制中获取十六进制值，您可以在程序员模式下使用 Windows 计算器、Photoshop 的颜色选择器等工具或任何在线转换器工具（甚至 Google 也可以：https ://www.google.com/?q= 191+到+十六进制）

您的第二个问题是 9 以下的 IE 不支持 HTML 5 标签。

您可以使用一些工具来帮助解决此问题，例如：

等等...

我强烈推荐使用http://html5boilerplate.com/

于 2012-12-09T00:35:11.790 回答