Кто-нить знает как лечить такой баг?

Great Rash · August 10, 2011

Смотреть в ИЕ7!


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>

	<style type="text/css">
		.test {display: inline-block; border: red 1px solid;}

		.l {display: block; overflow: hidden; border: green 1px solid;}
		.r {display: block; float: right; border: blue 1px solid;}
	</style>


</head>
<body>

	<span class="test">
		<span class="r">text right</span>
		<span class="l">text left</span>
	</span>

</body>
</html>

Правый текст должен лежать справа. Левый - слева. Ставить float: left; для <span class="l"> не подходит.

Bonzash · August 10, 2011

        <style type="text/css">
                .test {overflow: visible; display: inline-block; border: red 1px solid; float: right;}
                .text {display: block; float: left;}
        </style>

мб так?

psywalker · August 10, 2011

Помню сталкивался с таким багом, когда нужно было кнопку сделать для формы, сабмит. Помню, что долго не мучаясь, задал ширину, чтобы не париться.

Предлагаю такое решение:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
        <meta charset="UTF-8">
        <title></title>

        <style type="text/css">
                .test {zoom:1;overflow: visible; display: inline-block; border: red 1px solid;}
                .text {display: block;}
				.text em{ float: left;}
        </style>


</head>
<body>

        <span class="test">
                <span class="text"><em>text</em></span>
        </span>

</body>
</html>

Vlad · August 10, 2011

Это всё чёртово hasLayout! Только оно тут есть и его надо убрать. Для IE7 можно дописать.

.text {float: none;}

Great Rash · August 10, 2011

Извиняюсь, не совсем корректно задачу описал. Поправил код в первом посте.

Bonzash, нет это совсем не то.

psywalker, посмотри код в первом посте еще раз пожалуйста.

Vlad, так мне float позарез нужен...

Bonzash · August 10, 2011

Edited August 10, 2011 by Bonzash

psywalker · August 10, 2011

Извиняюсь, не совсем корректно задачу описал. Поправил код в первом посте.
psywalker, посмотри код в первом посте еще раз пожалуйста.

Блин, боюсь что лечения только два

1) Задать жёсткую ширину, чисто для ИЕ7

2) Либо таблица.

Это всё чёртово hasLayout! Только оно тут есть и его надо убрать. Для IE7 можно дописать.
.text {float: none;}

Это, кстати, в старом примере не помогло.

Great Rash · August 10, 2011

Блин, боюсь что лечения только два
1) Задать жёсткую ширину, чисто для ИЕ7
2) Либо таблица.

Трындец... Оба решения не подходят...

UPD: О эмулировал похожую конструкцию! На первый взгляд то что нужно:


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>

	<style type="text/css">
		.test {display: inline-block; text-align: right; border: red 1px solid;}

		.l {float: left; border: green 1px solid;}
		.r {display: inline-block; overflow: hidden; border: blue 1px solid;}
	</style>


</head>
<body>

	<span class="test">
		<span class="l">text left</span>
		<span class="r">text right</span>
	</span>

</body>
</html>

psywalker · August 10, 2011

Блин, боюсь что лечения только два
1) Задать жёсткую ширину, чисто для ИЕ7
2) Либо таблица.
Трындец... Оба решения не подходят...

А нельзя например скриптом вычислять размер блоков с текстом и ставить ширину контейнеру? Или может экспрешан какой есть?

Great Rash · August 10, 2011

Вроде уже порешал

psywalker · August 10, 2011

Вроде уже порешал

Прикольно, молодца!

SelenIT · August 10, 2011

Как вариант — специально для IE отдавать вариант вообще без float-ов (слегка навеяно примером Great Rashа в недавней теме про верт. выравнивание):

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.test {display: inline-block; border: red 1px solid; writing-mode: rl-tb;}
		.l {display: inline-block; border: green 1px solid; writing-mode: lr-tb;}
		.r {display: inline-block; border: blue 1px solid; writing-mode: lr-tb;}
	</style>
</head>
<body>
	<span class="test">
		<span class="r">text right</span><!-- no space! --><span class="l">text left</span>
	</span>
</body>
</html>

Насколько оправдано — не знаю...

Great Rash · August 11, 2011

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

Sign In

Кто-нить знает как лечить такой баг?

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information