1

我正在尝试在我的布局模板的标题部分构建一个包含 3 列（固定 - 液体 - 液体）的标题，ASP.NET MVC4但我无法完全使用 IE6+、Chrome、FF 等。

具体来说，我需要它看起来像

 |--------------------------------------|
 | wrapper                              |
 | |---------| |----------| |---------| |
 | | left    | |   title  | | right   | |
 | |---------| |----------| |---------| |
 |--------------------------------------|

问题（除了必须支持 IE6 和 IE7）是当窗口小于 500 像素时，我需要进行一些换行；看起来像。这种包装只需要在支持媒体查询的浏览器上进行。（因此，对于 IE < 9，它可以在缩小上例中的“标题”时将其缩小）。

 |--------------------------------------|
 | header-wrapper                       |
 | |---------|              |---------| |
 | | left    |              | right   | |
 | |---------|              |---------| |
 |                                      |
 | |----------------------------------| |
 | |              title               | |
 | |----------------------------------| |
 |--------------------------------------|

这是我到目前为止的CSS

.content-wrapper {
    margin: 0 auto;
    max-width: 1140px;   
}
.header-wrapper {
    text-align: center;
    vertical-align: text-bottom;
}
.header-left-box {
    float: left;
    width: 160px;
}
.header-right-box {
    float: right;
    margin:auto;    
}
.header-center-box {
    min-width: 200px;
    background:none;
    margin:auto;
    width:50%;
    padding: 4px;
}
.site-logo
{
    background-image:url('/Content/images/logo.png');
    background-repeat: no-repeat;
    background-position: top left;    
    display:block;        
    width:130px;
    height:80px;    
    margin-bottom: 5px;
}

这是MVC4模板的相关部分

<header>
    <div class="content-wrapper header-wrapper">
        <div class="header-left-box">
            <div class="site-logo"></div>      
        </div>
        <div class="header-right-box">
            <nav>
                <ul id="menu"><li>Quit</li></ul>
            </nav>               
        </div>                        
        <div class="header-center-box">
            <p>title</p>
        </div>
    </div>
</header>

我更喜欢利用 CSS 和 HTML 的解决方案。

4

2 回答 2

1

除了 Jason 的回答之外，对于特定于浏览器的编码或样式表，您可以将 javascript 用于 IE 以外的浏览器。

if (navigator.userAgent.toLowerCase().indexOf('chrome') != -1) {
    document.write('<link rel="stylesheet" type="text/css" href="style-ch.css" media="all" />');
}

就像<!--[if IE 6]><![endif]-->，仅当使用的浏览器是指定的浏览器时，才会运行一些代码（在上面的示例中，加载特定于 chrome 的样式表）。

当然你也可以指定浏览器版本，像这样： .indexOf('chrome 11')

确保在声明常规/跨浏览器样式表之后声明此代码，否则它可能不起作用。

不过，我不明白您为什么要为 IE6 和 IE7 进行优化，因为它们真的太老了。但这当然是您个人的选择:)

于 2013-03-27T18:51:43.900 回答
0

问题中提供的代码适用于我需要的一切，除了 IE6 和 IE7。

我决定在我的布局中添加以下内容来替换原来的 body 标签。

<!--[if IE 6]> <body class="ie6"> <![endif]-->
<!--[if IE 7]> <body class="ie7"> <![endif]-->
<!--[if gt IE 7]><!--> <body> <!--<![endif]-->

有了这个，我可以使用以下样式作为问题中已经定义的样式的补充。

.ie6 .header-wrapper,
.ie7 .header-wrapper {
    text-align: center;
    vertical-align: text-bottom;        
    height: 85px;
}

.ie6 .header-left-box,
.ie7 .header-left-box {    
    float: left;
    width: 25%;
    height: 82px;
}

.ie6 .header-right-box,
.ie7 .header-right-box {
    float: right;
    width: 25%;
    height: 82px;
    text-align: right;    
}

.ie6 .header-center-box,
.ie7 .header-center-box {    
    padding: 4px;       
    margin-left: 26.2%;
    margin-right: 26.2%;
    width: 40%;
}

这可以处理我需要列对所有浏览器执行的所有操作，包括 IE6 和 IE7 中的列换行。

于 2013-03-27T15:58:48.953 回答