Question

我想在网站模板中制作冻结布局，但我在Internet Explorer中遇到问题。

我这样做

<div id="NewsBlock">
    <div id="aboutUs">
        <h1></h1>
        <span class="OpenDayBanner"></span>
        <p>You can replace the paragraph above with some text describing your FAQ system. Here's an example: If you have questions about our web site, our products or our services, there’s a good chance you’ll find the answer here</p>
    </div>
</div>

对于CSS，我这样做

div#NewsBlock{
    min-width: 1300px;   //this work for Firefox and chrome
    width:100%;
    overflow: hidden;
    height: 510px;
    background-image:url(../images/aboutstartupbg.png);
    background-repeat: repeat-x;
 }

使用宽度的最小宽度和百分比值可以在Firefox和Chrome中冻结布局，但它在IE中不起作用!!请提出任何建议

Answer 1

您必须定义<p>元素的min-width属性。

示例：

p.myClass {
    min-width: 420px;
   }

Answer 2

通过将HTML的dtd更改为XHTML来解决问题

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ">

到

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd">

   <html xmlns="http://www.w3.org/1999/xhtml">

Answer 3

使用严格的doctype，例如<!DOCTYPE HTML>，以确保IE正确呈现。

另请考虑将<meta http-equiv="X-UA-Compatible" content="IE=edge" />添加到<head>。

对于冻结布局，min-width在IE中不起作用

3 个答案: