none
CSS Nao Aplica No IE10 RRS feed

  • Pergunta

  • Olá Galera,

    Meu problema é o seguinte, tenho uma aplicação rodando legal a não ser pelo css que não funciona corretamente no IE10, mas isso só ocorre quando subo a aplicação para o servidor.

    por exemplo tenho minha pagina principal no chorme fica assim:

    Ja no IE10

    coloco aqui tbm o codigo css e da pagina acima:

    body {
        background: #ebebeb; 
    }
    
    #Main_Content {
        width: 1000px;
        height: auto;
        margin: 0 auto;
        margin-top: 0px;
        border-radius: 10px;
        padding: 5px;
        font-family: 'Segoe UI';
        background: #ebebeb;
    }
    
    #mainLayout {
        width: 1000px;
        height: 92px;
    }
    
    #logo {
        width: 266px;
        height: 82px;
        float: left;
    }
    
    #topMenu {
        width: 732px;
        height: 82px;
        float: right;
    }
    
    #welcomeLogout {
        height: auto;
        width: 300px;
        text-align: right;
        font-family:'Segoe UI';
        font-size: 15px;
        margin: 5px 10px 0px 420px;
    }
    
    #title {
        height: auto;
        width: 700px;
        margin: 0px 0px 0px 10px;
        text-align: left;
        font-family: 'Segoe UI';
        font-size: 18px;
        font-style: italic;
        font-weight: bold;
    }
    
    #bottomMenu {
        height: auto;
        width: 700px;
        margin: 5px 0px 0px 20px;
        text-align: right;
        font-family: 'Segoe UI';
        font-size: 16px;
    }
    
    #mainMenu {
        width: 1000px;
        height: 30px;
        border: 1px solid #000000;
        border-radius: 10px;
        background: #E15154;  /*para browsers sem suporte a CSS 3*/
        background: -ms-linear-gradient(top, #E15154 1%,#951A1D 100%); /*IE10+ */
        background: -webkit-gradient(linear, left top, left bottom, from(#E15154), to(#951A1D)); /* webkit browsers */
        background: -moz-linear-gradient(top,  #E15154,  #951A1D);  /*Firefox 3.6+ */
        text-align: left;
        line-height: 25px;
        font-family:'Segoe UI';
        margin: 0 auto;
    }
    
    
    #contentPage {
        width: 990px;
        height: auto;
        border: 1px solid #e5e5e5;
        margin: 0 auto;
        margin-top: 10px;
        border-radius: 15px;
        padding: 5px;
        box-shadow: 2px 2px 10px 5px #ccc;
        font-family:'Segoe UI';
        background: #fff;
    }
    
    #footer {
       width: 1000px;
       height: auto;
       font-family:'Segoe UI';
       font-size: 14px;
       text-align: center;
       margin: 10px 0px 0px 0px;
    }
    
    .ddlBusiness {
        font-family: 'Segoe UI';
        border-radius:5px;
        background: transparent;
        border:1px solid #ccc;
        display: inline-block;
        -webkit-appearance: none;
        -moz-appearance: none;
        border: solid #9A9A9A 0px;
        list-style-type:none;
    }
    
    .hl_Logout {
        font-family: 'Segoe UI';
        text-align: left;
        color: #000000;
        text-decoration: none;
    }
    
    .MainMenuClass {
        color: #000000;
        font-family: 'Segoe UI';
        font-size: 14px;
    }

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="PortalColaborador.MasterPage.Main" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    
        <!-- links para css -->
        <link href="~/Content/Style/Default.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/Style/Error.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/Style/Main.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/Style/Graphs.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/Style/changePassword.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/Style/Report.css" rel="stylesheet" type="text/css" />
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="Main_Content">
            <div id="mainLayout">
                <div id="logo">
                    <img src="../../Content/Img/LogoPequeno.png" />
                </div><!-- Fim logo -->
                <div id="topMenu">
                    <div id="welcomeLogout">
                        Bem Vindo <asp:LoginName ID="LoginName1" runat="server" />  
                        &nbsp;&nbsp;  | &nbsp;&nbsp; 
                        <asp:HyperLink ID="hl_logout" runat="server" CssClass="hl_Logout" NavigateUrl="~/Page/Logout/logout.aspx">Logout</asp:HyperLink>
                         &nbsp
                        <img src="../../Content/Img/logout.png" />
                    </div><!-- Fim welcomeLogout -->
                    <div id="title"> 
                        Portal do Colaborador
                    </div><!-- Fim title -->
                    <div id="bottomMenu">
                        <asp:DropDownList ID="ddl_company" runat="server" CssClass="ddlBusiness" AutoPostBack="True" OnSelectedIndexChanged="ddl_company_SelectedIndexChanged">
                        </asp:DropDownList>
                    </div> <!-- Fim bottomMenu -->
                </div><!-- Fim topMenu -->
            </div><!-- Fim mainLayout -->
            <div id="mainMenu">
                <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataMainMenu" Orientation="Horizontal" StaticDisplayLevels="2" Font-Names="Segoe UI" Font-Size="14px" ForeColor="Black">
                    <DynamicHoverStyle BackColor="#E15154" Font-Names="Segoe UI" Font-Size="14px" ForeColor="White" />
                    <DynamicMenuItemStyle BackColor="#E15154" Font-Names="Segoe UI" Font-Size="14px" ForeColor="White" />
                    <DynamicSelectedStyle Font-Names="Segoe UI" Font-Size="14px" ForeColor="White" />
                    <StaticHoverStyle Font-Names="Segoe UI" ForeColor="White" Height="29px" />
                    <StaticMenuItemStyle Font-Names="Segoe UI" Font-Size="14px" ForeColor="White" Height="29px" />
                    <StaticMenuStyle Height="29px" HorizontalPadding="10px" Width="990px" />
                    <StaticSelectedStyle Font-Names="Segoe UI" Font-Size="14px" ForeColor="White" Height="29px" />
                </asp:Menu>
                <asp:SiteMapDataSource ID="SiteMapDataMainMenu" runat="server" />
            </div><!-- Fim mainMenu -->
            <div id="contentPage">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            
                </asp:ContentPlaceHolder>
            </div><!-- Fim contentPage -->
            <div id="footer">
                2012 - Portal do Colaborador Close-Up International
            </div>
        </div><!-- Fim Main_Content -->
        </form>
    </body>
    </html>
    

    quinta-feira, 15 de agosto de 2013 17:43

Respostas

  • Boa noite,

    Está parecendo um problema na configuração do IIS do seu server. Um workaround para resolver o problema seria adicionar essa tag no head do seu html:

    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

    Ela força compatibilidade com IE.



    sexta-feira, 16 de agosto de 2013 02:04

Todas as Respostas

  • Boa noite,

    Está parecendo um problema na configuração do IIS do seu server. Um workaround para resolver o problema seria adicionar essa tag no head do seu html:

    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

    Ela força compatibilidade com IE.



    sexta-feira, 16 de agosto de 2013 02:04
  • Utilizo CSS 3 no IE sem problemas, cada browser exibe o layout de forma diferente, pois os recursos de compatibilidade entre os mesmo são implementados de acordo com a necessidade do fabricante.

    Atenciosamente, Marcio Nogueira Cardoso Pinto.

    sexta-feira, 16 de agosto de 2013 11:15
  • Utilizo CSS 3 no IE sem problemas, cada browser exibe o layout de forma diferente, pois os recursos de compatibilidade entre os mesmo são implementados de acordo com a necessidade do fabricante.

    Atenciosamente, Marcio Nogueira Cardoso Pinto.

    Não é um problema com o CSS. Se você ler o CSS dele está explícito que ele se preocupou com as especificidades de cada browser.
    sexta-feira, 16 de agosto de 2013 16:41
  • Boa noite,

    Está parecendo um problema na configuração do IIS do seu server. Um workaround para resolver o problema seria adicionar essa tag no head do seu html:

    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

    Ela força compatibilidade com IE.




    Cara, você me ajudou muuuuuuuito! Tive o mesmo tipo de problema, gastei HORAS brigando com o meu css, atrasei o projeto, mas finalmente, você resolveu. obrigado mesmo!
    segunda-feira, 23 de dezembro de 2013 11:33