O tipo de entrada do IE8 está mostrando a borda mesmo quando eu defino a borda para nenhum
-
23-09-2019 - |
Pergunta
Eu usei a imagem do tipo de entrada para exibir meus botões de estilo personalizado, mas por algum motivo o IE8 mostra a borda, mesmo quando eu defini na borda do CSS para nenhum. Em outros navegadores, não está mostrando fronteira.
input[type=image] {
margin: 0px;
padding: 0px;
border: none;
border-width: 0px;
border-style: none;
background-color: none;
}
Solução
O IE não apóia esse seletor de maneira muito consistente na minha experiência; Dê à entrada uma classe e, em seguida, estilizá -la com isso.
<input type="image" class="imageinput" name="whatever" />
input.imageinput {
margin: 0px;
padding: 0px;
border: none;
background-color: none;
}
Outras dicas
Use o outline
Propriedade CSS:
input[type="image"] {
border: none;
outline: none;
}
outline
Desenhe uma linha em torno da margem do elemento, sem contribuir para a largura do elemento, e neste caso o IE8 pode ter um esboço padrão especificado. Leia mais sobre isso no W3Schools.
Primeiro de tudo, obrigado por fazer esta pergunta. Eu enfrentei esse problema há um ano, você pode escolher a maneira como precisa, mas o que eu fiz é simplesmente importar esse CSS como o ponto de partida no meu estilo.css e por causa do qual não me fornece uma saída indesejável
/* Reset CSS */
body, html {
height:100%;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
margin:0;
padding:0;
}
body {
line-height:1;
}
ol, ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:none;
}
:focus {
outline:0;
}
del {
text-decoration:line-through;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* Floating & Alignment */
.fl {
float:left;
}
.fr {
float:right;
}
.ac {
text-align:center;
}
.ar {
text-align:right;
}
/* Clear Floats */
.col-full:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.fix {
clear:both;
height:1px;
overflow:hidden;
margin:-1px 0 0;
}
html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear {
background:none;
border:0;
clear:both;
display:block;
float:none;
font-size:0;
list-style:none;
overflow:hidden;
visibility:hidden;
width:0;
height:0;
margin:0;
padding:0;
}
Se você manter o hábito de importar esse CSS, ele nunca fornecerá uma saída indesejável em qualquer navegador.
Obrigado!