Línea de texto no deseada en div

Question

Entonces, tengo un problema que he estado tratando de resolver por un tiempo. Estoy obteniendo una fila adicional de texto (o eso parece) en mi estructura DOM que, por lo que yo sé, es agregado por el navegador. Esto sucede en todos los navegadores en los que he ejecutado el código (IE8, IE9, Chrome 20, Firefox 11) y deseo eliminarlo.

Esta es mi HTML:

<div id="wrapper"> 
    <div id="inner"> 
     <div class="item"> 
      content 
     </div> 
    </div> 
</div>​ 

y este es mi CSS:

#wrapper { 
    bottom: 0; 
    left: 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
} 
.item { 
    float: left; 
    width: 171px; 
    position: relative; 
    background: #fc0; 
} 

Y aquí es un jsFiddle mostrando mi problema: http://jsfiddle.net/henrikandersson/wMg2m/

Como se puede ver, hay un espacio entre la parte superior y el elemento amarillo, que por lo que puedo decir es causado por una línea de texto por encima del # inner-div que no debería estar allí.

Answer 1

Usted tiene un invisible de control y mando &65279; tras el cierre de su > div contenedor. Es realmente el código HTML byte order mark.

Simplemente elimine eso y estará bien.

Ver this updated fiddle.

Answer 2

Tiene un carácter especial justo después de <div id="wrapper"> que es invisible.

Así funciona esto:

<div id="wrapper"> 
    <div id="inner"> 
     <div class="item"> 
      s 
     </div> 
    </div> 
</div> 

que volver a teclear el código que ha tenido, se ha arreglado el problema.

El problema podría ser un código de copiado o pegado, o su editor de texto.

Notepad++ es el mejor editor de texto gratuito de Windows.

Encontré el problema al pegar el código en un archivo de texto con codificación ANSI en Notepad ++. ANSI no puede mostrar ese carácter, por lo que cambia a ?.

Answer 3

añadir

#inner { float:left; }

http://jsfiddle.net/wnhqY/