Al utilizar una lista de definición en la que los términos (elemento DT) y las definiciones (elemento DD) deben ir en una misma línea (por ejemplo el DT flotado a la izquierda y el DD flotado a la derecha) surge un pequeño inconveniente: los elementos se descolocan en cuanto hay alguno que tenga una altura distinta.

Trasteando con la propiedad CSS clear hay navegadores en los que parece solucionarse, pero Internet Explorer (y sobre todo en su sexta versión) sigue mostrándolo mal.

Por ello he creado un plugin Jquery que permite solucionar el problema de las alturas, igualándolas cuando resulta necesario. El plugin añade una clase al elemento al que se aplica, de modo que se pueden dar estilos distintos cuando no hay Javascript, por ejemplo, con cada elemento ocupando la línea entera.

Ver ejemplo funcional.

HTML

Una lista de definición con la clase lista_definicion que será la que se utilice en la llamada al plugin de Jquery:

<dl class="lista_definicion clear">
  <dt>[...]</dd>
    <dd>[...]</dd>
  <dt>[...]</dd>
    <dd>[...]</dd>
  <dt>[...]</dd>
    <dd>[...]</dd>
</dl>

Javascript

La llamada al plugin:

jQuery(document).ready(function () {
  jQuery('.lista_definicion').listaDefinicion();
});

Y el plugin:

(function($){
$.fn.listaDefinicion = function(options){
var defaults = {
  // Clase que se le dará al elemento cuando hay soporte JS
  claseJs: 'lista_definicion_js'
};
var datos = {};

var op = $.extend(defaults, options);

return this.each(function(){
  $(this).addClass(op.claseJs);
  $(this).find('dt').each(function () {
    var termino = $(this);
    var definicion = $(this).next();
    
    var alturaTermino = termino.outerHeight(true);
    var alturaDefinicion = definicion.outerHeight(true);
    
    if (alturaDefinicion>alturaTermino) {
      var diferencia = alturaDefinicion-alturaTermino;
      var margen = parseInt(termino.css('margin-bottom'));
      termino.css('margin-bottom',(margen+diferencia)+'px');
    }
    if (alturaTermino>alturaDefinicion) {
      var diferencia = alturaTermino-alturaDefinicion;
      var margen = parseInt(definicion.css('margin-bottom'));
      definicion.css('margin-bottom',(margen+diferencia)+'px');
    }
  });
});

}})(jQuery);