Почему мои кнопки HTML движутся в IE?Они не двигаются в Chrome или FF - PullRequest
Новая
       2

Почему мои кнопки HTML движутся в IE?Они не двигаются в Chrome или FF

2 голосов
/ 20 декабря 2010

Мы используем AJAX для отправки данных в нашу базу данных.Я добавил несколько отзывов для пользователя, включая счетчик (анимированный .gif), который вращается во время запроса, и текст «Пропустить / Не сдать», который отображается для пользователя после завершения запроса.* 

<center>
    <table style="width:350px;">
        <tr>
            <td style="width:100px; min-width:100px;" align="right">
                <span id="spinner-and-text-displayed-here"></span>
            </td>
            <td style="width:150px">
                <input type="button" value="Submit" onclick="submit();"/>
                <input type="button" value="Cancel" onclick="cancel();"/>
            </td>
            <td style="width:100px"></td>
        </tr>
    </table>
</center>

Когда пользователь нажимает кнопку отправки, вращатель вращается до тех пор, пока не будет возвращен обратный вызов ajax.В этот момент кнопки НЕ сдвигаются.Как только я получаю ответный звонок, я отображаю текст «Успешно!»(отображается в span с помощью jQuery $(el).html("Successful!");), что приводит к смещению кнопок вправо.Это сообщение исчезает (также используя jquery), и как только кнопка полностью исчезает, кнопки возвращаются в исходное положение.

Если я жестко закодировал «Успешно!»внутри диапазона кнопки смещены, поэтому я знаю, что это как-то связано с текстом (помните, что он не смещается при отображении счетчика [который использует тег img]).

Этоне имеет значения, насколько широко я установил первую td ширину.

Есть ли способ, как я могу предотвратить смещение этих кнопок в IE?

Ответы [ 2 ]

2 голосов
/ 21 декабря 2010

Попробуйте добавить border-collapse:collapse; к определению style для table и уменьшить размер средней ячейки. 

<center>
    <table style="width:350px;border-collapse:collapse;">
        <tr>
            <td style="width:100px; min-width:100px;" align="right">
                <span id="spinner-and-text-displayed-here"></span>
            </td>
            <td style="width:145px">
                <input type="button" value="Submit" onclick="submit();"/>
                <input type="button" value="Cancel" onclick="cancel();"/>
            </td>
            <td style="width:100px"></td>
        </tr>
    </table>
</center>
0 голосов
/ 21 декабря 2010

Добавьте DOCTYPE к вашему файлу, например 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">    </script>

<body>
    <table style="width:350px;">
        <tr>
            <td style="width:100px; min-width:100px;" align="right">
                <span id="el"></span>
            </td>
            <td style="width:150px">
            <input type="button" value="Submit" onclick="$('#el').html('Success');"/>
            <input type="button" value="Cancel" onclick="cancel();"/>
           </td>
           <td style="width:100px"></td>
        </tr>
     </table>
</body>
</html>

У меня была похожая проблема, и это было из-за того, что IE обрабатывал тэг не так, как другие браузеры.

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

Нет похожих вопросов

...