Tengo un problema de posicionamiento con algunos elementos que, al inspeccionar que IE8 herramientas de Desarrollador me muestra esto:

¿Cómo deshacerse de un elemento de desplazamiento mediante el uso de CSS?

Ahora estoy bastante seguro de que mi problema es que el 12 de desplazamiento, pero ¿cómo puedo quitar? No puedo encontrar ninguna mención de CSS propiedad offset. ¿Necesitamos un Desplazamiento además de margen?

Aquí está el código que eso es la producción de este:

 <div id="wahoo" style="border: solid 1px black; height:100px;">

    <asp:TextBox ID="inputBox" runat="server" />

    <input id="btnDropDown" type="button" style="width:26px; height:26px; background-position: center center; border-left-color: buttonface; background-image: url(Images/WebResource.gif); border-bottom-color: buttonface; border-top-color: buttonface; background-repeat: no-repeat; border-right-color: buttonface;"  tabindex="99" />

    <div id="ListboxWrapper" style="display:none; position:absolute; onfocusout="this.style.display = 'none'"">
       <asp:ListBox ID="lstBoxCompany" runat="server" AutoPostBack="True" OnSelectedIndexChanged="lstBoxCompany_SelectedIndexChanged" style="z-index: 100;" Width="300px" />               
    </div>

</div>

El elemento con el offset es inputBox

  • Es su elemento posicionado? Compruebe left y top propiedades.
  • Un poco de código sería muy útil aquí. No hay ningún ‘offset’ regla en CSS, pero es decir, tienen una tendencia a agregar los píxeles aleatorios en lugares al azar. Es normalmente para hacer con flotadores y posicionamiento
  • Quiero suponer ‘offset’ es ‘píxeles relacionados con otros elementos – tales como un margen sobre un elemento anterior empujando esta abajo. No tengo tiempo para experimentar con IE dev tools ahora para averiguar.
  • He añadido el código completo con CSS en línea para que podamos ver lo que pasa
  • Hay una página web de ejemplo podemos mirar de ello – por ejemplo, para que podamos punto de firebug y entender el más amplio de la página. E. g. es su control de entrada de heredar margen o relleno de otra definición css?
  • Ill intentar conseguir lo cargan en algún lugar pronto – muy ocupado atm :-S
  • Yo tenía el mismo problema y el más votado pregunta en este post guardado mi trasero (gracias por su muy bien explicado el post). Se debe revisar si usted está listo para marcar aceptado la solución a su pregunta.

InformationsquelleAutor m.edmondson | 2011-01-27

13 Comentarios

  1. 43

    Que el desplazamiento es básicamente la posición x,y de que el navegador se ha calculado para el elemento sobre la base de que la posición del atributo css. Así que si pones un <br> antes de que él o cualquier otro elemento, que iba a cambiar el offset. Por ejemplo, usted puede ponerlo a 0 por:

    #inputBox{position:absolute;top:0px;left:0px;}

    o

    #inputBox{position:relative;top:-12px;left:-2px;}

    Por lo tanto, cualquier posicionamiento problema que tiene, no es necesariamente un problema con el offset, aunque siempre se puede arreglar mediante el juego con la parte superior,izquierda,derecha y parte inferior de los atributos.

    Es su problema de la incompatibilidad de los navegadores?

    • Por favor, consulte la Pedregosa comentario acerca de vertical-align así. La fijación de la configuración de alineación parece preferible a la fuerza primordial del navegador de posicionamiento del elemento.
  2. 31

    Para mí, fue vertical-align: baseline vs vertical-align: top que estaba causando el desplazamiento de la parte superior.

    Intenta establecer vertical-align: top

    • Esto es mejor que usar el posicionamiento absoluto
    • Su respuesta es impresionante, el hecho de que tengo que poner la vertical align cuando tengo 4 inline-block divs que se niegan a alinear es toro. Se terminaron las horas de trabajo. Gracias.
    • Trabajó con un <button> incrustado en un <li> elemento.
  3. 9

    Solución rápida:

    position: relative;
    top: -12px;
    left: -2px;

    esto debe equilibrarse en los desplazamientos, pero tal vez usted debe echar un vistazo a su entera disposición y ver cómo esa caja interactúa con otros cuadros.

    Como la terminología, left, right, top y bottom CSS desplazamiento propiedades. Se utilizan para el posicionamiento de los elementos en una ubicación específica (cuando se utiliza con absolute o fixed posicionamiento), o para mover los mismos en relación a su ubicación por defecto (cuando se utiliza con relative de posicionamiento). Los márgenes en el otro lado de especificar las brechas entre las cajas y a veces el colapso, por lo que no puede ser estimado de manera fiable utilizado como compensaciones.

    Pero tenga en cuenta que en el caso de que desplazamiento no puede ser computada (únicamente) de CSS compensaciones.

    • Que sólo se mueve en el espacio en blanco al otro lado del elemento.
    • Lo que los espacios en blanco? Y por qué otra cosa que el objetivo de la caja sería movido?
    • El espacio en blanco el espacio que no tiene nada en ella. Otras cosas que el objetivo de la caja no se mueve, que es el punto. Si usted tiene algo 1px abajo, y mover hasta 12 px, entonces es 13px a continuación, en lugar de 1px.
    • No podemos tener la misma definición de los espacios en blanco, pero me consigue lo que usted está tratando de decir. Estoy de acuerdo en que la brecha se mudó a otro lado. He etiquetado la solución de una «solución rápida» ya que puede o puede no ser utilizable. Es la única cosa que me puede sugerir hasta que el autor de la pregunta proporciona más detalles.
  4. 3

    Configuración de las propiedades top y left para valores negativos podría no ser una buena solución si tu problema es que estás en las peculiaridades de la modalidad. Esto puede suceder si la página se encuentra una <!DOCTYPE> declaración, haciendo que sean prestados en las peculiaridades del modo en IE8. En IE8 Developer Tools, asegúrese de que los «Caprichos Modo» no está seleccionada en «Modo de Documento». Si es seleccionado, usted puede necesitar agregar la correspondiente <!DOCTYPE> declaración.

  5. 2

    Si usted está usando el IE developer tools, asegúrese de que usted no ha accidentalmente dejó a un mayor ajuste. Me estaba haciendo a mí mismo loco con este mismo tema hasta que vi que era con Internet Explorer 7 Normas. Cambió a Internet Explorer 9 Normas y todo encajó a la derecha en su lugar.

    • Algunos de nosotros tienen los usuarios todavía en IE7.
  6. 2

    elemento en movimiento superior: -12 px o posicionamiento absoluto, no resuelve el problema, pero sólo máscaras,

    Tuve el mismo problema – comprobar si la tienes en un elemento de ajuste mixto: elementos flotantes con los no-flotante – de mi no-elemento flotante causado este extraño desplazamiento a la flotante

    • En mi caso yo estaba tratando de coincidir con un sitio web de la mirada con la de un prototipo. Había una fila de inline-block divs con el mismo ancho que el del prototipo, pero mi compensaciones se fuera por 4. Descubrí que había una mezcla de divs flotantes y no flotantes en el sitio web. Haciendo que todos flotante quitan la extra de desplazamiento. Esto fue especialmente sorprendente porque yo no podía ver mucho más diferentes entre la CSS.
  7. 1

    definir el margen y el relleno del elemento se enfrenta el problema:

    #element_id {margin: 0; padding: 0}  

    y ver si el problema existe. Es decir muestra la página con más deseados de la herencia. debe dejar de hacerlo.

  8. 1

    Esto parece extraño, pero puede intentar establecer vertical-align: top en el CSS para las entradas. Que lo fija en IE8, al menos.

  9. 1

    Tuve el mismo problema en nuestra .NET basada en web, que se ejecuta en DotNetNuke (DNN) y lo resuelto para mí era básicamente un simple margen de restablecimiento de la etiqueta form. .NET basado en sitios web son a menudo envuelto en un formulario y sin restablecer el margen se puede ver el extraño desplazamiento que aparecen a veces, sobre todo cuando hay algunos scripts incluidos.

    Así que si usted está tratando de arreglar este problema en tu sitio, intenta entrar en esto en tu archivo CSS:

    form {
      margin: 0;
    }
    • Yo tenía el mismo problema y cambiar la forma de margen también trabajó para mí.
  10. 0

    Yo tenía el mismo problema. El desplazamiento apareció después de la actualización de UpdatePanel. La solución fue añadir una etiqueta vacía antes de que el UpdatePanel como este:

    <div></div>

    • Es un UpdatePanel ASP.NET cosa, ¿verdad? Debido a que este no parece ser un ASP.NET pregunta.
    • De hecho, si ver el fragmento de código de la pregunta que usted se daría cuenta de que es un ASP.NET pregunta.
    • Ah. Lo siento, sólo desnatada, no noto las asp:TextBox. FWIW, el problema no es una ASP.NET problema. Cuando este problema se presenta, por lo general lo que esto significa es que el desplazamiento de la pregunta se debe a algún otro elemento es más grande, y si es que resulta en mala disposición, la clave es normalmente para reducir el margen, relleno, o en la frontera de algún otro elemento dentro de la misma div padre.
  11. 0

    En mi caso el desplazamiento se añade a un elemento personalizado con diseño de cuadrícula dentro de un li, mientras que el ul era una vertical flexbox.

    ¿Cómo deshacerse de un elemento de desplazamiento mediante el uso de CSS?

    El bastante simple solución fue establecer el definir la li como elemento de bloque con

    li {
     display: block;
    }

    Y el desplazamiento se había ido

Dejar respuesta

Please enter your comment!
Please enter your name here