CSS max-height and max-width at the same time not

2019-08-01 18:45发布

站内问答 / HTML/CSS
871 2 6

I have the following css defined in a style applied to a panel in my aspx page.

max-height: 70%; overflow: auto;
max-width: 70%; overflow: auto;

In Mozilla, I can resize my browser window and the panel will properly display scroll bars when the browser window becomes too small to contain the full content of the panel. This works great.

In IE8, the max-height css appears to have higher priority than the max-width css.

For instance:

1) When making the browser window smaller vertically, the width scrollbar will show up properly on the bottom of the panel.

2) When making the browser window smaller horizontally, the height scrollbar will show up properly on the bottom of the panel.

3) When making the browser window smaller vertically, the width scrollbar will show up properly on the bottom of the panel, but then if I continue to make the browser window smaller horizontally as well, then the height scrollbar appears, but the width scrollbar disappears. If I make the browser window long enough to accomodate the height of the panel, then the width scrollbar reappears.

How do I make IE8 show both scroll bar when appropriate instead of just the height one? This works correctly in Firefox.

Here is a sample page that exhibits the problem exactly as it exists in my primary page. Click on "Show Popup" and then try to make the browser screen smaller. You'll see the popup scroll bars behave the way described above.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="css.aspx.cs" Inherits="Sandbox.css" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style type="text/css">
    .Background
    {
        filter: Alpha(Opacity=40); 
        opacity: 0.4;
        background-color: #CCCC99;
        z-index:1000;
    }
    .Popup
    {
      border: solid 1px #c0c0c0;
      background:#FFFFFF;
      padding: 0px 10px 10px 10px;
      position:absolute;
      padding-top: 10px;
      max-height: 90%; overflow: auto;
      max-width: 90%; overflow: auto;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
    <asp:Button ID="Button1" runat="server" Text="Show Popup" />
    <asp:panel ID="Panel1" runat="server" ScrollBars="Auto" CssClass="Popup">
        <table>
            <tr>
                <td>
                    <asp:Label ID="Label1" runat="server" Text="Label1"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label2" runat="server" Text="Label2"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label3" runat="server" Text="Label3"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label4" runat="server" Text="Label4"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>
                </td>
            </tr>
        </table>
        <asp:Button ID="Button2" runat="server" Text="Ok" />
        <asp:Button ID="Button3" runat="server" Text="Cancel" />
    </asp:panel>
    <ajaxToolKit:ModalPopupExtender runat="server" TargetControlID="Button1" PopupControlID="Panel1" 
    BackgroundCssClass="Background" OkControlID="Button2" CancelControlID="Button3" />
    <table>
    <tr>
    <td>
        <table>
            <tr>
                <td>
                    <asp:Label ID="Label5" runat="server" Text="Label1"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox9" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:TextBox ID="TextBox10" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label6" runat="server" Text="Label2"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox11" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:TextBox ID="TextBox12" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label7" runat="server" Text="Label3"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox13" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:TextBox ID="TextBox14" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label8" runat="server" Text="Label4"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox15" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:TextBox ID="TextBox16" runat="server"></asp:TextBox>
                </td>
            </tr>
        </table>
    </td>
    <td>
        <table>
            <tr>
                <td>
                    <asp:Label ID="Label9" runat="server" Text="Label1"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox17" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:TextBox ID="TextBox18" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label10" runat="server" Text="Label2"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox19" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:TextBox ID="TextBox20" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label11" runat="server" Text="Label3"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox21" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:TextBox ID="TextBox22" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label12" runat="server" Text="Label4"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox23" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:TextBox ID="TextBox24" runat="server"></asp:TextBox>
                </td>
            </tr>
        </table>
    </td>
    </tr>
    </table>
    </form>
</body>
</html>

And the codebehind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Sandbox
{
    public partial class css : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

2条回答
萌系小妹纸
2楼-- · 2019-08-01 18:52

IE8 has problems with understanding max-width and max-height when there is no width or height set. Judging from your question and your code I take you'd prefer not to use those properties, but in this case you might not have a choice if you want to get it working in IE8.

Try using an IE8 specific @media query:

@media \0screen {
  .Popup {
    height: 500px;
    width: 500px;
  }
}

Alternatively, put the width and height properties in the class and append the values with \9 to target IE6 and up:

.Popup
{
  border: solid 1px #c0c0c0;
  background:#FFFFFF;
  padding: 0px 10px 10px 10px;
  position:absolute;
  padding-top: 10px;
  height: 500px\9;
  width: 500px\9;
  max-height: 90%; overflow: auto;
  max-width: 90%; overflow: auto;
}
查看更多
0人赞 添加讨论(0) 举报
疯言疯语
3楼-- · 2019-08-01 19:06

Try changing overflow: auto; to overflow: scroll;

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)