1

我正在尝试创建一个最小宽度为 500 像素的表格，其中一个单元格包含一个最小宽度为 300 像素的文本区域。表格的最小宽度似乎根本不起作用。我正在使用 CSS 来设置表格和文本区域的样式。这是一个已知的问题？我已经发布了下面的代码。

必须在 IE7 中正确显示

ASPX 页面

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <link rel="Stylesheet" href="./CSS/SpecialOps.css" />
        <link rel="Stylesheet" href="./CSS/myadditions.css" />
        <title>PFS Special OPS - My Additions</title>
    </head>
    <body>
        <!-- #include file="./SSI/header.aspx -->
        <div id="spacer">
            <div id="logospacer">

            </div>
            <div class="tabspacer">

            </div>
            <div class="tabspacer highlightspacer">

            </div>
            <div class="tabspacer">

            </div>
        </div>
        <div id="content">
            <div id="contentinner">
                <div class="divtitle">
                    Add News Excerpt
                </div>
                <div id="addnews">
                    <table id="addnewstbl">
                        <tr>
                            <td>
                                Title:
                            </td>
                            <td>
                                <input type="text" class="addnewsform"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Excerpt:
                            </td>
                            <td>
                                <textarea class="addnewsform"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Your Name:
                            </td>
                            <td>
                                Steven Norris
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </body>
    </html>

CSS

/*
* Stylesheet for my additions page of Special OPS
* Created by Steven T. Norris on 4/4/2012
* Last Update:          Update By:
*/
#addnews
{
    border-style:solid;
    border-width:1px;
    border-color:Black;
    padding:3px;
}
#addnews
{

}
#addnewstbl
{
    min-width:500px;
    border-style:solid;
    border-width:1px;
    border-color:Black;
}
.addnewsform
{
    min-width:300px;
}
4

4 回答 4

1

这是我会做的。将以下内容添加到

#addnewstbl
{
    width: 100%
    border-style:solid;
    border-width:1px;
    border-color:Black;
}

#addnews
{
    border-style:solid;
    border-width:1px;
    border-color:Black;
    padding:3px;
    float: left;
    min-width: 500px;
}
于 2012-04-04T15:03:51.970 回答
0

我找到了一种可以达到预期效果的解决方法。不是特别相同的方法，但至少是相同的最终产品。代码中有一些你不需要担心的额外位，但基本上将你的容器设置为 100%，并且你的表单元素设置为 100 的一小部分，并且应该实现效果。在这种情况下，我使用了 98%，只是为了在右边缘提供一点缓冲。这并不理想，但它有效，而且这种方法的错误几乎不明显。

ASPX 页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <link rel="Stylesheet" href="./CSS/SpecialOps.css" />
    <link rel="Stylesheet" href="./CSS/myadditions.css" />
    <title>PFS Special OPS - My Additions</title>
</head>
<body>
    <!-- #include file="./SSI/header.aspx -->
    <div id="spacer">
        <div id="logospacer">

        </div>
        <div class="tabspacer">

        </div>
        <div class="tabspacer highlightspacer">

        </div>
        <div class="tabspacer">

        </div>
    </div>
    <div id="content">
        <div id="contentinner">
            <div class="divtitle">
                Add News Excerpt
            </div>
            <div id="addnews">
                <table id="addnewstbl">
                    <tr>
                        <td class="addnewstitlecell">
                            Title:
                        </td>
                        <td>
                            <input type="text" class="addnewsform"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="addnewstitlecell">
                            Excerpt:
                        </td>
                        <td>
                            <textarea rows="10" class="addnewsform"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="addnestitlecell">
                            Catagory:
                        </td>
                        <td>
                            <select>
                                <option value="AVP/VP">AVP/VP</option>
                                <option value="Commercial">Commercial</option>
                                <option value="Compliance">Compliance</option>
                                <option value="Correspondence">Correspondence</option>
                                <option value="Customer Service">Customer Service</option>
                                <option value="ERAC">ERAC</option>
                                <option value="Government Payer">Government Payer</option>
                                <option value="PFS">PFS</option>
                                <option value="Regulatory">Regulatory</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="addnewstitlecell">
                            Submitted By:
                        </td>
                        <td>
                            Steven Norris
                        </td>
                    </tr>
                </table>
            </div>
            <div class="divtitle">
                Previously Added
            </div>
            <div id="prevadded">
                <div class="prevaddedtop">
                    <div class="prevaddedtitle">
                        News Excerpt Title
                    </div>
                    <div class="prevaddedcontent">
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    </div>
                    <div class="prevaddeduser">
                        -Steven Norris
                    </div>
                    <div class="prevaddedbuttons">
                        <input class="button" type="submit" value="Edit" />
                        <input class="button" type="submit" value="Delete" />
                    </div>
                </div>
                <div class="prevaddedtop">
                    <div class="prevaddedtitle">
                        News Excerpt Title
                    </div>
                    <div class="prevaddedcontent">
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    </div>
                    <div class="prevaddeduser">
                        -Steven Norris
                    </div>
                    <div class="prevaddedbuttons">
                        <input class="button" type="submit" value="Edit" />
                        <input class="button" type="submit" value="Delete" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

/**
* Overall stylesheet for PFS Special OPS
* Created By Steven T. Norris on 4/3/2012
* Last Updated:         Last Updated By:
*/

/*
* Overall Navigation
* #navigation min-width mirrors .tab widths + #logoimg width + 200px allowance for #welcome width
* #navigation height mirrors #logoimg height
*/
#navigation
{
    min-width:677px;
    vertical-align:bottom;
    border-bottom-style:solid;
    border-bottom-width:2px;
    border-bottom-color:Black;
    height:100px;
}

/* 
* TopTabs
* .tab height and width mirrors image height and width for ./Images/blueTab.png
* .tabspacer width, margin-right, and padding mirrors .tab
* .tabspacer bottom mirrored in #content
* .tab top mirrors #logoimg height - .tab height - .tab padding-top - .tab padding-bottom
*/
.tab
{
    float:left;
    height:20px;
    width:100px;
    margin-right:5px;
    padding:2px;
    position:relative;
    top:76px;
    left:20px;
    font-size:large;
    background-image:url('../Images/blueTab.png');
    text-align:center;
}
.tablink
{
    color:Black;
    text-decoration:none;
}
.tablink:hover
{
    cursor:pointer;
    color:white;
}
.tabspacer
{
    height:2px;
    width:100px;
    float:left;
    margin-right:5px;
    padding:2px;
    left:20px;
    bottom:2px;
    position:relative;
    z-index:-1;
    background-color:#0383de;
    border-bottom-width:1px;
    border-bottom-style:solid;
    border-bottom-color:black;
}

/*
* Logo
* #logospacer width mirrors #logoimg width
*/
#logo
{
    float:left;
}
#logoimg
{
    width:130px;
    height:100px;
}
#logospacer
{
    width:130px;
    height:1px;
    float:left;
    clear:left;
}

/*
* Content
* #content min-width mirrors #navigation
* #content background-color mirrors ./Images/blueTab.png bottom color
*/
#content
{
    height:100%;
    width:100%;
    background-color:#0386e1;
    position:relative;
    bottom:2px;
    min-width:677px;
}
#contentinner
{
    margin:10px;
    background-color:White;
    overflow:auto;
    border-style:solid;
    border-width:1px;
    border-color:Black;
    padding:5px;
}

/*
* Welcome
* #welcome height, padding, and top mirrors .tab
*/

#welcome
{
    float:right;
    height:20px;
    position:relative;
    padding:2px;
    top:76px;
    font-weight:bold;
}

/*
* Spacers
* #spacer min-width mirrors #navigation
* #highlightspacer background-color mirrors ./Images/blueTab.png bottom color
*/
#spacer
{
    min-width:677px;
}
.highlightspacer
{
    background-color:#0383de;
    border-bottom-color:#0383de;
    z-index:1;
}

    /*
    * Titles placed directly above a bordered div
    */
    .divtitle
    {
        position:relative;
        top:4px;
        font-weight:bold;
    }

    /*
    * Buttons
    */
    .button
    {
        background:url('../Images/blueButton.png');
        border-style:none;
        width:100px;
        height:20px;
    }
    .button:hover
    {
        cursor:pointer;
    }
/*
* Stylesheet for my additions page of Special OPS
* Created by Steven T. Norris on 4/4/2012
* Last Update:          Update By:
*/
#addnews
{
    border-style:solid;
    border-width:1px;
    border-color:Black;
    padding:3px;
}
#addnewstbl
{
    width:100%;
}
.addnewsform
{
    width:98%;
}
.addnewstitlecell
{
    width:100px;
    vertical-align:top;
}
#prevadded
{
    border-style:solid;
    border-width:1px;
    border-color:Black;
    padding:3px;
}
.prevaddeduser
{
    text-align:right;
}
.prevaddedbuttons
{
    text-align:right;
}
.prevaddedtitle
{
    font-weight:bold;
}
.prevaddedtop
{
    border-bottom-width:1px;
    border-bottom-style:solid;
    border-bottom-color:Black;
    padding-bottom:3px;
}
于 2012-04-09T12:16:36.830 回答
0

根据这个站点，最小宽度在 IE7 中是错误的。我推荐一种不使用它的不同方法。

于 2012-04-04T15:49:14.510 回答
0

这是 Internet Explorer 中的可比性视图问题。

如果您在网上搜索，有几种不同的方法可以解决此问题，但简而言之，您需要在 IE 中禁用此模式才能使 min-width 正常工作。

于 2012-08-23T20:51:08.893 回答