当前位置： 文江博客话题详情

CSS max-height 和 max-width 同时在 IE8 中不起作用？

发布于 2024-10-01 12:29:51 字数 8607 浏览 2 评论 0原文

我在应用于我的 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)
        {

        }
    }
}
原文

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)
        {

        }
    }
}

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

不可一世的女人 2024-10-08 12:29:51

尝试将 overflow: auto; 更改为 overflow:scroll;

Try changing overflow: auto; to overflow: scroll;

回复 原文
浊酒尽余欢 2024-10-08 12:29:51

当没有设置 width 或 height 时，IE8 无法理解 max-width 和 max-height。从您的问题和代码来看，我认为您不希望使用这些属性，但在这种情况下，如果您想让它在 IE8 中工作，您可能别无选择。

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

@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;
}

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;
}
回复 原文
~没有更多了~

关于作者

Spring初心

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

花开柳相依

文章 0 评论 0

zyhello

文章 0 评论 0

故友

文章 0 评论 0

对风讲故事

文章 0 评论 0

Oo萌小芽oO

文章 0 评论 0

梦明

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文