IE7 compatible CSS alternative

Asked

Viewed 86 times

0

I need to adapt a website to the IE-7 in compatibility mode, I searched some libraries so that the bootstrap works, tried the same to use icons(Font-Awesome, glyphicon).

Doubts I have?

  1. How can I use icons in IE-7.

  2. How do I scroll by clicking on a menu (scroll along with website by clicking on links/anchors).

  3. How do I load an image 100% into a div without distorting.

Follow screenshot of the site in the version to chrome and most current browsers:

Exibição para navegadores atuais Already on the IE-7 in compatibility is this beauty:inserir a descrição da imagem aqui I’m studying the CSS to achieve a better result, or more acceptable to that scenario, I will appreciate any suggestion or help, follows below what I tried:

.group{
			text-align:center;
			height:800px;
			z-index:1;
			top:70px;
			font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
		}
		
		.fixed-top{
			position: fixed;
			top: 0;
			height: 70px;
			z-index: 1000;
		}
		
		.title{
			font-weight: 700px;
			text-transform: uppercase;
			font-size: 50px;
			line-height: 100px;
			box-sizing: inherit;
		}
		
		#top{
		
			width:100%;
			padding-top:70px;
			text-align:center;
			border-bottom: 1px solid;
			color:white;
			margin: 0;
			background: url("https://uploaddeimagens.com.br/images/001/111/501/original/header2.jpg?1506619323") center;
			background-size: 100%;
			
		}
		
		#about{
			background-color: #e20613 !important;
			color:white;
		}
		
		img{
			height: 33%;
			width: 33%;
		}
    
/* Também incluo o Bootstrap-IE7Fix
 * Bootstrap 3 IE7 Fix v0.3
 * https://github.com/LPology/Bootstrap-IE7Fix
 */
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
<head>
	<meta content="ie=7.0000" http-equiv="x-ua-compatible">
	<title>Inpart Saúde</title>
	<meta content="text/html; charset=utf-8" http-equiv="content-type">
	<meta name="description" content="sistema inpart saúde">
	
	<link rel="shortcut icon" href="/favicon.ico">
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>

</head>
<body class="bgsCover">
	<div id="wrap">
		<div class="navbar navbar-default fixed-top">
			<div class="container">
				<a href="#login" class="navbar-toggle link" data-target=".navbar-collapse" data-toggle="collapse">
					Acesso ao sistema
				</a> 

				<a href="#contact" class="navbar-toggle link" data-target=".navbar-collapse" data-toggle="collapse">
					Contatos
				</a> 
				
				<a href="#solution" class="navbar-toggle link" data-target=".navbar-collapse" data-toggle="collapse">
					Soluções
				</a>
				
				<a href="#services" class="navbar-toggle link" data-target=".navbar-collapse" data-toggle="collapse">
					Serviços
				</a>
				
				<a href="#about" class="navbar-toggle link" data-target=".navbar-collapse" data-toggle="collapse">
					Empresa
				</a>
				
				<a class="navbar-brand logo" href="#">
					<img alt="Inpart Saúde" src="includes/InpartSaude.png" style="width:13%">
				</a> 
			</div>
		</div>
		<div class="group" id="top">
			<div class="container">
				<h4 class="title">Missão & Visão</h4>
				<div class="col-sm-12">
					<h2>Integrante do GRUPO INPART SERVIÇOS, a INPART SAÚDE nasceu em 2004 com o objetivo de atender as necessidades das empresas atuantes no mercado de saúde, através da criação e disponibilização de um sistema integrado de gerenciamento de processos de cotação e compra e de informações de materiais médico-hospitalares de alto custo, baseado na Internet.</h2>
					<p>
						<a class="btn btn-lg learn-more-btn" id="btn-about" href="#about">
							Saiba mais »
						</a>
					</p>
				</div>
			</div>
		</div>
		<div class="group" id="about">
			<div class="container">
				<h4 class="title">Foco e Especialização</h4>
				<div class="col-sm-12">
					<h2>Nossa especialização objetiva promover a otimização do processo de fornecimento de materiais especiais/de alto custo, a melhoria na qualidade e agilidade de acesso às informações, fomentando a interação entre os agentes de mercado, através de módulos on-line de interface amigável, contribuindo com os processos de gestão, gerando resultados concretos.</h2>
					<p>
						<a class="btn btn-lg learn-more-btn" id="btn-services" href="#services">
							Descubra as vantagens »
						</a>
					</p>
				</div>
			</div>
		</div>
		<div class="group" id="services">
			<div class="container">
				<h4 class="title">Serviços com vantagens exclusivas</h4>
				<div class="row">
					<div class="col-sm-12">
						<div class="col-sm-3">
							<h3>Tecnologia</h3>
							<p class="description">Cotação e Compras on-line em tempo real.</p>
							<p class="description">Alta tecnologia em desenvolvimento de sistemas.</p>
							<p class="description">Módulos de sistema de interface amigável ao usuário.</p>
							<p class="hidden-xs">
						</div>
						<div class="col-sm-3">
							<h3>Produtividade</h3>
							<p class="description">Aumento de produtividade.</p>
							<p class="description">Informações claras e confiáveis de fácil acesso.</p>
							<p class="description">Diversidade de fornecedores e materiais.</p>
							<p class="description">Relatórios customizáveis.</p>
						</div>
						<div class="col-sm-3">
							<h3>Segurança e transparência</h3>
							<p class="description">Rastreabilidade e Histórico de processos.</p>
							<p class="description">Transparência e ética em processos.</p>
						</div>
						<div class="col-sm-3">
							<h3>Suporte</h3>
							<p class="description">Equipe de suporte ao usuário capacitada e pronto para auxiliar.</p>
							<p class="description">Equipe médica multidisciplinar.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="group" id="solution">
			<div class="container">
				<div class="row">
					<div class="col-sm-12">
						<div class="col-sm-3 img">
						  <img src="img/portfolio/thumbnails/InpartSaude.png" alt="Logo Inpart Saúde">
						</div>
						<div class="col-sm-3 img">
						  <img  src="img/portfolio/thumbnails/QLikView.png" alt="QLikView">
						</div>
						<div class="col-sm-3 img">
						  <img src="img/portfolio/thumbnails/InpartSaudeBI.png" alt="Inpart Saúde B.I.">
						</div>
						<div class="col-sm-3 img">
						  <img  src="img/portfolio/thumbnails/InpartSaudeBI.jpg" alt="Inpart Saúde">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="group" id="contact">
			<div class="container">
				<h4 class="title">Mantenha contato!</h4>
				<div class="row">
					<div class="col-sm-12">
						<h2>Entre em contato diretamente conosco através do e-mail de atendimento da Inpart Saúde.</h2>
						<p>
							(xx) xxxx-xxxx
							<a href="mailto:[email protected]">[email protected]</a>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div><!--/#wrap -->
	<div id="footer">
		<div class="container">
			<p class="pull-right">
				Copyright © 2017 Inpart Saúde | 
				<a href="">Termos de serviço</a> | 
				<a href="">Políticas de privacidade</a>
			</p>
		</div>
	</div>
</body>
</html>

html css

  • Just a curiosity: why use the IE 7?

  • Legacy system that only works on IE-7 and I can’t change it at the moment.

1 answer

1


I’ll be honest, IE-7 is well outdated, if it were IE-8 would still be able to say something, because it is able to find users of Winxp and Winvista, although generally use alternative browsers or upgrade to IE8.

Bootstrap requires at least IE8 and yet, neither 8 nor 9 support everything, it’s very likely that some things in your project simply won’t work, no matter how hard you try.

The fontawesome4 is also not supported by IE-7 as explained in http://fontawesome.io/get-started/, you can experience the 3.2.1: http://fontawesome.io/3.2.1/get-started/#need-ie7, then after downloading the files your HTML should look similar to this:

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<!--[if IE 7]>
      <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
<![endif]-->

If you still want to insist on the IE-7 you can use responsiveness and some other features the following "polyfills":

If you download them add like this (it will only work in browsers lower than IE9):

<!--[if lt IE 9]>
  <script src="js/html5shiv.min.js"></script>
  <script src="js/respond.min.js"></script>
<![endif]-->

If you want to use Cdns:

<!--[if lt IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

  • Thank you for the answer, I will try these alternatives vlw

  • @Caiqueromero keep in mind that you have chosen super new technology to use in obsolete environments, do not expect miracles, what you can do is create more static pages that work in old browsers and with less effects, still beautiful.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.