Question

我正在使用asp.net创建一个响应式网站，我的目标浏览器是Internet Explorer8，因为我项目的未来用户正在使用Internet Explorer 8.

我在将所有输入字段设置为相同宽度时遇到问题。虽然我将宽度设置为＆＃34; 90％＆＃34;他们每个人仍然显示不同的宽度。有人可以帮助我吗？

请看照片。

这是我的下拉列表中发生的事情。该文本已根据下拉列表的大小进行削减。

dropdwonlist

这就是我想要做的。它在Chrome中运行良好，但在Internet Explorer 8中运行良好。 chromepreview

这就是我到目前为止所拥有的。

CSS

*
            {
                padding:0;
                margin:0;
            }

            html
            {
                overflow:auto;
            }

            html, body
            {
                margin:auto;
                width:100%;
                height:100%;
                margin:auto;
                background:#ddd;
            }

            .placeholder
            {
                color:#aaa;
            }

            .main
            {
                width:100%;
                height:100%;
            }

            .nav
            {
                width:9%;
                min-width:9%;
                background:#111;
                text-align: center;
                position:absolute;
            }

            .panel
            {
                min-height:100%;
            }

            .nav ul
            {
                margin-top:110%;
            }

            .nav ul a
            {
                text-decoration:none;
                border:none;
            }

            a img
            {
                border:0;
                outline:none;

            }

            a:active, a:focus
            {
                outline:none;
                border:none;
            }


            .nav li
            {
                display:block;
                float:center;
                color:#fff;
                text-align:center;
            }


            .nav #logout, #add, #view, #setting
            {
                border-bottom:1px solid #3a3a3a;
            }

            .nav #add
            {
                border-top:1px solid #3a3a3a;
            }

            .nav li:hover
            {
                background:#333;

            }

            .nav li img
            {
                padding:20px 0 20px 0;
                height:55%;
                width:55%;
            }

            .nav_text
            {
                color:#777;
                font-family:helvetica;
                font-size: 70%;
                text-align:center;
                margin-top:-10px;
                text-indent:-5px;
                margin-bottom:5px;
            }

            .main_bar
            {
                width:100%;
                display:inline-block;
                margin-right:3%;
                background:#fff;
                float:right;
                width:75%;
                border-bottom:10px solid #3498db;
                margin-top:10px;
                background:rgba(255,255,255,1);
                box-shadow:rgba(0,0,0,0.9) 0 1px 4px 0;
                border-bottom:10px solid #0dabc9;
                /*zoom: 1;
                filter:progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=0),
                       progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=90),
                       progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=180),
                       progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=300);
                */
            }

            .tool_bar
            {
                width:10%;
                background:#333;
                height:50px;
                float:right;
                position:relative;
                margin-right:2%;
                margin-top:10px;
                border-top:30px solid #3498db;
            }

            .second_bar
            {
                display:block;
                margin-right:15%;
                background:#fff;
                float:right;
                width:75%;
                border-bottom:10px solid #3498db;
                margin-top:10px;
                background:rgba(255,255,255,0.2);
                box-shadow:rgba(0,0,0,0.9) 0 1px 4px 0;
                border-bottom:10px solid #0dabc9;
                zoom:1;
                filter:progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=0),
                       progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=90),
                       progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=180),
                       progid:DXImageTransform.Microsoft.Shadow(Color=#c0c0c0, Strength=8, Direction=300);
            }

            .draft
            {   
                font-weight:bold;
                font-size:11px;
                font-family:Helvetica;
                color:#555;
                padding:1%;
                border:0px solid black;
                width:20%;

            }

            .draft span
            {
                display:inline-block;
                width:14%;
                border:1px solid #2980b9;
                padding:1%;
                border-radius:3px 0 0 3px;
                /*background:#bdc3c7;*/
                background:#2980b9;

            }

            .draft span img
            {
                vertical-align:bottom;
                width:16px;
                height:16px;
                padding:0px 5px;
            }

            .draft input[type=textbox]
            {
                /*position:absolute;*/
                border:1px solid #b0b0b0;
                border-radius:0 5px 5px 0;
                padding:2%;
                width:65%;
                padding-left:5%;
            }


            .draft input[type=textbox]:focus
            {
                outline:none;
            }

            #Inner_Right_Layout {
                background-color: #43BDA4;
                height: 100%;
                width: 100%;    
                border: 0;
                padding: 0;
                margin: 0;

            }
            #control_main_div {
                height: 50%;
                width: 70%;
                margin-left: 0%;
                margin-top: 0%;
                border:1px solid black;
            }
            .username_div {
                height: 15%;
                width: 95%;
                margin: 0px;
                border:1px solid #aaa; 
                padding-bottom:5px;
            }

            .usr_img_div {
                width: 90%;
                float: left;
                border:;1px solid #2980b9;
                background:#2980b9;
                padding:3px;
            }

            .usrnm_txtbx_div {

                width: 95%;
                margin-left: 0%;
                font-family: Ubuntu;
                border:1px solid #aaa;
                margin-top:0%;

            }

            .usrnm_ddl_div
            {
                max-width:50%;
                margin-left:0%;
                font-family:Ubuntu;
                border:0;
                margin-top:0%;
            }

            .ddlprop
            {
                height:95%;
                width:95%;
                margin:0;
                padding:6px;
                border:0;
                margin-left:1px;
                font-family:'Ubuntu';
                font-size:16px;
            }
            .textprop {
                height: 95%;
                width: 95%;
                margin: 0;
                padding: 6px;
                border: 0;
                margin-left: 1px;
                font-family: 'Ubuntu';
                font-size: 16px;
                font-weight: 100;
            }

            img
            {
                height:18px;
                width:18px;
                padding:4px;
            }

            .textfield
            {
                padding-top:10px;
            }

            .main_bar table
            {
                margin-top:3%;
                margin-left:3%;
                margin-bottom:3%;
            }

            td
            {
                padding-top:10px;
            }

XHTML

            <body>
                <form id="form1" runat="server">

                <div class = "main">
                <div class = "nav panel">
                <ul>
                <li id = "add"><a href = "#"><asp:Image ID="Image1" runat="server" ImageUrl = "~/images/add.PNG" /><p class = "nav_text">ADD</p></a></li>
                <li id = "view"><a href = "#"><asp:Image ID="Image2" runat="server" ImageUrl = "~/images/view2.PNG" /><p class = "nav_text">VIEW</p></a></li>
                <li id = "setting"><a href = "#"><asp:Image ID="Image3" runat="server" ImageUrl = "~/images/setting1.PNG" /><p class = "nav_text">SETTING</p></a></li>
                <li id = "Li1"><a href = "#"><asp:Image ID="Image4" runat="server" ImageUrl = "~/images/logout1.PNG" /><p class = "nav_text">LOGOUT</p></a></li>
                </ul>
                </div>

                <div class = "tool_bar"></div>

                <div class = "main_bar">
                <table>
                <tr>

                <td><div class = "usr_img_div"><asp:Image ID="Image5" runat="server" ImageUrl="~/images/adver.PNG" /></div></td>
                        <td class = "textfield"><div class = "usrnm_txtbx_div">
                            <asp:DropDownList ID="DropDownList2" runat="server" CssClass="ddlprop">
                            <asp:ListItem>sample text</asp:ListItem>
                            <asp:ListItem>This is a long text and what im trying to do is to set the max-width.</asp:ListItem>
                            </asp:DropDownList>
                        </div></td>

                        <td><div class = "usr_img_div"><asp:Image ID="Image7" runat="server" ImageUrl="~/images/adver.PNG" /></div></td>
                        <td class = "textfield"><div class = "usrnm_txtbx_div">
                            <asp:DropDownList ID="DropDownList3" runat="server" CssClass="ddlprop">
                            <asp:ListItem>sample text</asp:ListItem>
                            <asp:ListItem>This is a long text and what im trying to do is to set the max-width.</asp:ListItem>
                            </asp:DropDownList>
                        </div></td>

                        <td><div class = "usr_img_div"><asp:Image ID="Image6" runat="server" ImageUrl="~/images/adver.PNG" /></div></td>
                        <td class = "textfield"><div class = "usrnm_txtbx_div"><asp:TextBox ID="TextBox1" runat="server" CssClass = "textprop"></asp:TextBox></div></td>

                </tr>

                <tr>
                        <td><div class = "usr_img_div"><asp:Image ID="Image8" runat="server" ImageUrl="~/images/adver.PNG" /></div></td>
                        <td class = "textfield"><div class = "usrnm_txtbx_div">
                            <asp:DropDownList ID="DropDownList1" runat="server" CssClass="ddlprop">
                            <asp:ListItem>sample text</asp:ListItem>
                            <asp:ListItem>This is a long text and what im trying to do is to set the max-width.</asp:ListItem>
                            </asp:DropDownList>
                        </div></td>

                        <td><div class = "usr_img_div"><asp:Image ID="Image9" runat="server" ImageUrl="~/images/adver.PNG" /></div></td>
                        <td class = "textfield"><div class = "usrnm_txtbx_div"><asp:TextBox ID="TextBox2" runat="server" CssClass = "textprop"></asp:TextBox></div></td>

                        <td><div class = "usr_img_div"><asp:Image ID="Image10" runat="server" ImageUrl="~/images/adver.PNG" /></div></td>
                        <td class = "textfield"><div class = "usrnm_txtbx_div"><asp:TextBox ID="TextBox3" runat="server" CssClass = "textprop"></asp:TextBox></div></td>

                </tr>

                <tr>

                    <td><div class = "usr_img_div"><asp:Image ID="Image11" runat="server" ImageUrl="~/images/adver.PNG" /></div></td>
                        <td class = "textfield"><div class = "usrnm_txtbx_div">
                            <asp:DropDownList ID="DropDownList4" runat="server" CssClass="ddlprop">
                            <asp:ListItem>sample text</asp:ListItem>
                            <asp:ListItem>This is a long text and what im trying to do is to set the max-width.</asp:ListItem>
                            </asp:DropDownList>
                        </div></td>

                       <td><div class = "usr_img_div"><asp:Image ID="Image12" runat="server" ImageUrl="~/images/adver.PNG" /></div></td>
                        <td class = "textfield"><div class = "usrnm_txtbx_div"><asp:TextBox ID="TextBox4" runat="server" CssClass = "textprop"></asp:TextBox></div></td>

                </tr>

                <tr>

                    <td><div class = "usr_img_div"><asp:Image ID="Image13" runat="server" ImageUrl="~/images/adver.PNG" /></div></td>
                        <td class = "textfield"><div class = "usrnm_txtbx_div">
                            <asp:DropDownList ID="DropDownList5" runat="server" CssClass="ddlprop">
                            <asp:ListItem>sample text</asp:ListItem>
                            <asp:ListItem>This is a long text and what im trying to do is to set the max-width.</asp:ListItem>
                            </asp:DropDownList>
                        </div></td>

                        <td><div class = "usr_img_div"><asp:Image ID="Image14" runat="server" ImageUrl="~/images/adver.PNG" /></div></td>
                        <td class = "textfield"><div class = "usrnm_txtbx_div">
                            <asp:DropDownList ID="DropDownList6" runat="server" CssClass="ddlprop">
                            <asp:ListItem>sample text</asp:ListItem>
                            <asp:ListItem>This is a long text and what im trying to do is to set the max-width.</asp:ListItem>
                            </asp:DropDownList>
                        </div></td>

                </tr>
                </table>
                </div>

                </div>
                </form>
            </body>
            </html>

使用ASP.NET的响应式Internet Explorer 8网站

0 个答案: