Элементы списка находятся за пределами строки, переходите в строку при наведении курсора (в сафари)

Question

Я пытаюсь создать список, в котором изображения встроены в текст, и вижу проблему, которая необычна, по крайней мере для меня.В последней из четырех ссылок изображение и текст находятся вне строки, но переходят в строку, когда я нахожу их, и остаются в строке после того, как я прекращаю зависать над ними.

Итак, когда страница загружается,мой список выглядит следующим образом:

[изображение] текст

[изображение]

текст

, но когда я наводю курсор мыши на последний элемент списка, он прыгаетв следующую строку:

[изображение] текст

[изображение] текст

и остается таким же после того, как я уберу мышь.Надеюсь, это описание понятно.

html:

            <div class= "social">
            <div class= "section follow">
            <h1>Join Me</h1>
            <ul>
            <li><a title="Tumblr" href="http://nickgardner.tumblr.com"><img alt="" src="images/tumblricon3.png">Tumblr</a>
            <li><a title="Twitter" href="http://twitter.com/#!/nerdkudzu"><img alt="" src="images/twittericon3.png">Twitter</a>
            <li><a title="Rdio" href="http://www.rdio.com/#/people/nngardner/"><img alt="" src="images/rdioicon3.png">Rdio</a>
            <li><a title="Dribbble" href="http://dribbble.com/nickgardner"><img alt="" src="images/dribbbleicon3.png">Dribbble</a>
            </ul>
            </div>
        </div>

и css:

.social {
  background: none; 
  float: left;
  /**width: 9.9%; /* 100/1010 */
  margin: 15px 0 15px -29px;
  color: #606060;

  }

.social .section {
  margin-bottom: 1.5em;
  float: right;
  }

.social li,
.social h1 { 
  font-size: .9em;
  text-transform: capitalize;

  }

.social h1 {
  margin-left: 30px;
  margin-bottom: 0;
  text-transform: uppercase;
  font: bold .6875em "museo-slab", serif;
  color: #606060;


  }

.social li {
  margin: 0;
  padding: 0;
  color: #695C44;
  list-style-type: none;
    }  

.social a {
  padding: .4em 0;

  }

.social .follow a img {
  float: left;
  width: 24px;
  margin: -5px 3px 0 0;
  opacity: .8;
  -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }

.social .follow a:hover img {
  opacity: .5;
    }

.social .follow li a {
  padding: .5em 0 .5em 0;
  font-family: "museo-slab", serif;
  font-weight: normal;
  font-style: italic;
  color: #695C44;
  font-size: .8.5em;
  text-shadow: 0 2px 0 rgba(255,255,255,.5);
  display: block;
  }

.social a:hover {
  opacity: .8;
}

---

спасибо за чтение и еще больше спасибо за ответ ник

Answer 1

это проприетарные решения, которые решают такие проблемы

li{
  float: none !important;
  max-width: 90%;
  overflow: hidden;
  min-width: 90%;
  display: block;
  white-space: nowrap;

}