1

最小幅300pxのテキストエリアを含むセルで最小幅500pxのテーブルを作成しようとしています。テーブルの最小幅がまったく機能していないようです。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

これが私がすることです。以下をthに追加します

#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

このサイトによると、IE7ではmin-widthにバグがあります。それを使用しない別のアプローチをお勧めします。

于 2012-04-04T15:49:14.510 に答える
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

これは、InternetExplorerの比較可能性ビューの問題です。

ネットを探し回る場合、これを回避する方法はいくつかありますが、要するに、最小幅を機能させるには、IEでこのモードを無効にする必要があります。

于 2012-08-23T20:51:08.893 に答える