Internet explorer 8 CSS最大高度和最大宽度同时不适用于IE8？_Internet Explorer 8_Css

Internet explorer 8 CSS最大高度和最大宽度同时不适用于IE8？

internet-explorer-8 css

Internet explorer 8 CSS最大高度和最大宽度同时不适用于IE8？,internet-explorer-8,css,Internet Explorer 8,Css,我在aspx页面的面板上定义了以下css样式 max-height: 70%; overflow: auto; max-width: 70%; overflow: auto; 在Mozilla中，我可以调整浏览器窗口的大小，当浏览器窗口变得太小而无法包含面板的全部内容时，面板将正确显示滚动条。这很有效在IE8中，“最大高度”css似乎比“最大宽度”css具有更高的优先级例如： 1）垂直缩小浏览器窗口时，宽度滚动条将正确显示在面板底部 2）水平缩小浏览器窗口时，高度滚动条将正确显示在面板

我在aspx页面的面板上定义了以下css样式

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

在Mozilla中，我可以调整浏览器窗口的大小，当浏览器窗口变得太小而无法包含面板的全部内容时，面板将正确显示滚动条。这很有效

在IE8中，“最大高度”css似乎比“最大宽度”css具有更高的优先级

例如：

1）垂直缩小浏览器窗口时，宽度滚动条将正确显示在面板底部

2）水平缩小浏览器窗口时，高度滚动条将正确显示在面板底部

3）垂直缩小浏览器窗口时，宽度滚动条将正确显示在面板底部，但如果继续水平缩小浏览器窗口，则会显示高度滚动条，但宽度滚动条会消失。如果我使浏览器窗口足够长以适应面板的高度，那么宽度滚动条将重新出现

如何使IE8在适当的时候显示两个滚动条，而不是仅显示高度？这在Firefox中正常工作

下面是一个示例页面，它显示了与我的主页中存在的问题完全相同的问题。单击“显示弹出窗口”，然后尝试缩小浏览器屏幕。您将看到弹出滚动条的行为方式如上所述

    <%@ 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>

尝试更改溢出：自动到

溢出：滚动
IE8在没有设置宽度
或高度时，在理解最大宽度
和最大高度
方面存在问题。从你的问题和你的代码来看，我认为你不想使用这些属性，但在这种情况下，如果你想让它在IE8中工作，你可能没有选择
尝试使用IE8特定的@媒体
查询：
@media \0screen {
  .Popup {
    height: 500px;
    width: 500px;
  }
}

或者，将width
和height
属性放入类中，并将带有\9
的值附加到目标IE6及以上：
.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;
}

请提供一个url，这样我们就可以重现您的问题。@elvasive--我会解决的。目前没有向公众开放的测试环境，因此我必须设置它。@难以捉摸--我添加了一个显示该行为的示例。
.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;
}