Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

cesarhtc

formulario Aba IE

Por , em Desenvolvimento frontend

Recommended Posts

cesarhtc    0

cesarhtc
Postado

Boa  tarde, estou com um problema de apresentação de formúlario com, não funciona no IE, poderiam me ajudar?

 

Obrigado 


<HTML>
<HEAD>

<style>
@import url(https://fonts.googleapis.com/css?family=Titillium+Web);

*, *:after, *:before {
  box-sizing: border-box;
}
body{
  margin: 0;
  padding: 0;
  font-family: 'Titillium Web', sans-serif;
  line-height: 1.5;
  color: #444;
  font-size: 16px;
}
p{
  padding: 0 10px;
}

.tabs-container {
  position: relative;
  height: 360px;
  max-width: 98%;
  margin: 0 auto;
}
.tabs-container p{
  margin: 0;
  padding: 0;
}
.tabs-container:after {
  content: '.';
  display: block;
  clear: both;
  height: 0;
  font-size: 0;
  line-height: 0;
  visibility: none;
}
input.tabs {
  display: none;
}
input.tabs + label {
  line-height: 40px;
  padding: 0 20px;
  float: left;

  background: #444;
  color: #fff;
  cursor: pointer;
  transition: background ease-in-out .3s;
}
input.tabs:checked + label {
  color: #000;
  background: #eee;
}
input.tabs + label + div {
  width: 50%;
  opacity: 0;
  position: absolute;
  background: #eee;
  top: 40px;
  left: 0;
  height: 300px;
  padding: 10px;
  z-index: -1;
  transition: opacity ease-in-out .3s;
}
input.tabs:checked + label + div {
  opacity: 1;
  z-index: 1000;
}

</style>
</HEAD>

<BODY>
<p>Conteúdo</p>

<div class="tabs-container">

<input type="radio" name="tabs" class="tabs" id="tab1" checked>
<label for="tab1">Item</label>
<div>
  <p><iframe src="#" name="iframe_a" scrolling="no" frameborder="0" height="500px" width="800px" ></iframe>
</div>


<input type="radio" name="tabs" class="tabs" id="tab2">
<label for="tab2">Item</label>
<div>
  <p></p>
</div>

<input type="radio" name="tabs" class="tabs" id="tab3">
<label for="tab3">Item</label>
<div>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse condimentum vitae risus ac pharetra. Duis sit amet viverra ante. Vivamus non maximus risus. Curabitur eu velit cursus, faucibus erat ac, interdum magna. Sed eget lorem sapien. Maecenas metus lectus, pulvinar et elit vitae, elementum cursus odio. Suspendisse eget semper diam. Nunc sagittis felis sit amet purus aliquam, at mollis eros fermentum. Proin dolor eros, semper at fermentum id, imperdiet tristique massa. Ut rhoncus pharetra tempor. Aenean elementum felis quam, vel faucibus odio porttitor vel. </p>
</div>

</div>
  
<p>Resto do conteúdo</p>
</BODY>
</HTML>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

marsolim    110

marsolim
Postado

o que que não funciona? o que deveria acontecer que não tá acontecendo?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Manoel Neves    0

Manoel Neves
Postado

Amigo,

É provável que o seu navegador esteja forçando abrir como se fosse uma versão antiga do IE.  Já passei por algo parecido, mesmo usando o IE 11, no sharepoint os arquivos abriam como se fosse o IE-8 e resolveu no <META> assim:

   

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


 

Compartilhar este post

Link para o post
Compartilhar em outros sites

cesarhtc    0

cesarhtc
Postado

O que poderia utilizar no lugar do  iframe e ter o mesmo resultado que abre uma pagina. 

<HTML>
<HEAD>

<style>
@import url(https://fonts.googleapis.com/css?family=Titillium+Web);

*, *:after, *:before {
  box-sizing: border-box;
}
body{
  margin: 0;
  padding: 0;
  font-family: 'Titillium Web', sans-serif;
  line-height: 1.5;
  color: #444;
  font-size: 16px;
}
p{
  padding: 0 10px;
}

.tabs-container {
  position: relative;
  height: 360px;
  max-width: 98%;
  margin: 0 auto;
}
.tabs-container p{
  margin: 0;
  padding: 0;
}
.tabs-container:after {
  content: '.';
  display: block;
  clear: both;
  height: 0;
  font-size: 0;
  line-height: 0;
  visibility: none;
}
input.tabs {
  display: none;
}
input.tabs + label {
  line-height: 40px;
  padding: 0 20px;
  float: left;

  background: #444;
  color: #fff;
  cursor: pointer;
  transition: background ease-in-out .3s;
}
input.tabs:checked + label {
  color: #000;
  background: #eee;
}
input.tabs + label + div {
  width: 50%;
  opacity: 0;
  position: absolute;
  background: #eee;
  top: 40px;
  left: 0;
  height: 300px;
  padding: 10px;
  z-index: -1;
  transition: opacity ease-in-out .3s;
}
input.tabs:checked + label + div {
  opacity: 1;
  z-index: 1000;
}

</style>
</HEAD>

<BODY>
<p>Conteúdo</p>

<div class="tabs-container">

<input type="radio" name="tabs" class="tabs" id="tab1" checked>
<label for="tab1">Item</label>
<div>
  <p><iframe src="#" name="iframe_a" scrolling="no" frameborder="0" height="500px" width="800px" ></iframe>
</div>


<input type="radio" name="tabs" class="tabs" id="tab2">
<label for="tab2">Item</label>
<div>
  <p></p>
</div>

<input type="radio" name="tabs" class="tabs" id="tab3">
<label for="tab3">Item</label>
<div>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse condimentum vitae risus ac pharetra. Duis sit amet viverra ante. Vivamus non maximus risus. Curabitur eu velit cursus, faucibus erat ac, interdum magna. Sed eget lorem sapien. Maecenas metus lectus, pulvinar et elit vitae, elementum cursus odio. Suspendisse eget semper diam. Nunc sagittis felis sit amet purus aliquam, at mollis eros fermentum. Proin dolor eros, semper at fermentum id, imperdiet tristique massa. Ut rhoncus pharetra tempor. Aenean elementum felis quam, vel faucibus odio porttitor vel. </p>
</div>

</div>
  
<p>Resto do conteúdo</p>
</BODY>
</HTML>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito