Question

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

必须在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;
}

Answer 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;
}

Answer 2

根据this site，在IE7中，min-width是错误的。我推荐一种不使用它的不同方法。

Answer 3

我找到了一种可以达到预期效果的解决方法。不是特别相同的方法，但至少是相同的最终产品。代码中有一些额外的位，你不需要担心，但基本上将容器设置为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;
}

Answer 4

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

如果你在网上搜索，有几种不同的方法可以解决这个问题，但简而言之，你需要在IE中禁用这种模式以使最小宽度工作。

最小宽度表

4 个答案: