CSS max-height и max-width одновременно не работают в IE8? - PullRequest
Новая
       11

CSS max-height и max-width одновременно не работают в IE8?

1 голос
/ 09 ноября 2010

У меня есть следующий CSS, определенный в стиле, примененном к панели на моей странице aspx. 

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 ]

0 голосов
/ 15 октября 2013

IE8 имеет проблемы с пониманием max-width и max-height, когда не установлено width или 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;
}
0 голосов
/ 30 марта 2011

Попробуйте изменить overflow: auto; на overflow: scroll;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...