代码之家 › 专栏 › 技术社区 › Amanda Kitson

CSS最大高度和最大宽度同时不在IE8中工作?

css internet-explorer-8

1

Amanda Kitson · 技术社区 · 15 年前

我在我的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>

以及背后的代码:

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 回复 | 直到 13 年前

1

0

IMI 15 年前

尝试改变 overflow: auto; 到 overflow: scroll;

2

0

vtamm 13 年前

IE8的理解存在问题 max-width 和 max-height 当没有 width 或 height 集合。从你的问题和代码来看,我认为你更喜欢不要使用这些属性,但在这种情况下,如果您想让它在IE8中工作,您可能没有选择。

尝试使用特定于IE8的 @media 查询:

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

或者,将 宽度 和 高度 类中的属性并将值附加到 \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;
}