imagen IE8 tipo de entrada está mostrando frontera, incluso, cuando me puse a ninguna frontera

StackOverflow https://stackoverflow.com/questions/2145275

Pregunta

imagen de tipo de entrada que se han utilizado para mostrar los botones de mi estilo personalizado, pero por alguna razón espectáculos IE8 frontera, incluso cuando me puse en la frontera CSS a ninguno. En otros navegadores que no está mostrando frontera en absoluto.

input[type=image] {
    margin: 0px; 
    padding: 0px;
    border: none;
    border-width: 0px;
    border-style: none;
    background-color: none;
}
¿Fue útil?

Solución

IE no soporta que el selector de forma muy consistente en mi experiencia; dar a la entrada de una clase y luego estilo con que en lugar.

<input type="image" class="imageinput" name="whatever" />

input.imageinput {
    margin: 0px; 
    padding: 0px;
    border: none;
    background-color: none;
}

Otros consejos

Utilice la propiedad outline CSS:

input[type="image"] {
    border: none;
    outline: none;
}

outline dibuja una línea alrededor del margen del elemento, sin contribuir a la anchura del elemento, y en este caso IE8 podría tener un esquema predeterminado especificado. Lea más sobre esto en W3Schools .

en primer lugar gracias por hacer esta pregunta. Me he enfrentado a este problema resuelto hace un año, se puede elegir la forma en que necesita, pero lo que he hecho es simplemente importado este CSS como punto de partida en mi style.css y por la que no me proporciona una salida indeseable

/* 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;
}

Si va a mantener un hábito de importar este css nunca le dará una salida no deseada en cualquier navegador.

Gracias!

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top