Дисплей в IE хороший, но на сафари он вылетает - PullRequest
1 голос
/ 07 марта 2011

Ниже приведен мой код, который отлично работает в IE 8, но не работает в Safari 5. Текст переносится в IE, а расположение div правильно размещается в IE.Но на сафари все беспорядок.Ребята, пожалуйста, помогите мне сделать эту работу на Safari 5.

Я хочу, чтобы макет на Safari выглядел так на картинке enter image description here

Заранее спасибо:)

Примечание: я просто добавил образец URL-адреса из Интернета, чтобы улучшить отображение.

<html>
<body>  
<div style="overflow:auto;width:200px;clear:both;border:1px black solid;padding:4px;">
        <div class="clsContainer div1" style="border:1px solid black;margin-right:3px;float:left;">
            <img src="http://www.scicomcommerce.com/media/catalog/product/cache/1/image/5e06319eda06f020e43594a9c230972d/m/y/my-computer.jpg" 
        alt="" style="height:50px;width:50px;"/>        
        </div>
        <div class="clsContainer div2" style="float:left;">
            <div id="first" style="border:1px solid black;margin-bottom:3px;word-wrap:break-word;padding:2px;"> 
                The quick brown fox jumps over the lazy dog.
        </div>
            <div id="second" style="border:1px solid black;margin-top:8px;word-wrap:break-word;padding:2px;"> 
                ThisIsAVeryLongggggWordThatDoesNotWrapPleaseHelpMeSolveThisWordWrapIssueInSafari
        </div>
        </div>
</div>
</body>   
</html>

Ответы [ 2 ]

3 голосов
/ 07 марта 2011

Причина, по которой это не работает в сафари, заключается в том, что word-wrap : break-word пока широко не поддерживается.

Прочитайте этот пост для большего вдохновения: перенос слов в css / js

1 голос
/ 07 марта 2011

Вам нужно добавить явную ширину к вашим #first и #second divs:

#first
{
    width: 138px;
    border:1px solid black;
    margin-bottom:3px;
    word-wrap:break-word;
    padding:2px;
}

#second
{
    border:1px solid black;
    margin-top:8px;
    width: 138px;
    word-wrap:break-word;
    padding:2px;
}

Пример для вас здесь . Протестировано в Safari 5.0.3 для Windows.

Но Safari пока не поддерживает слово-брейк, поэтому вам придется использовать реальные слова:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...