вопрос кнопки формы в IE

Question

вопрос кнопки формы в IE

0

В Chrome и Firefox текст в кнопке завернут и занимает две строки. Однако в Internet Explorer текст в кнопке не завернут, и кнопка будет расширена.

Смотрите загрузку кнопки за $ 4.99 на http://www.manual-buddy.com/p/technics/rs1500usvolume1-service-manual.html.

CSS:

.paypalOrderSubmitButton {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    line-height: 100%;
    font-weight: normal;
    border-radius: 0.5em;
    padding: .5em 2em .55em;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    color: white!important;
    border: solid 1px #DA7C0C;
    background: #FAA51A;
    white-space: normal;
}

благодаря

Ankur Dhanuka 03 окт. 2013, в 16:07

Источник

Теги:

html

css

css3

6 ответов

Ещё вопросы

joydesigner · Answer 1 · 2013-10-03T12-03-00.000Z

Заполнение заставляет кнопку расширяться в IE, потому что IE будет добавлять пиксели дополнения.

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

<!--[if IE ]><![endif]-->
<!doctype html>
<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

Затем в вашем файле css вам нужно написать код:

.ie7 .paypalOrderSubmitButton, 
.ie8 .paypalOrderSubmitButton,
.ie9 .paypalOrderSubmitButton {
      width: 120px;
}

Вы можете установить ширину, или вы просто установите отступ к 0 для браузеров IE.

Это легкий способ исправить проблемы IE.

Tushar · Answer 2 · 2013-10-03T12-30-00.000Z

Это потому, что вы дали прописку в em (padding:.5em 2em.55em;)

Попробуйте дать его в px

rkawano · Answer 3 · 2013-10-03T12-10-00.000Z

Установите ширину и высоту кнопки, а экспликация добавит пробел: нормальный элемент

style="width: 120px; height: 40px; white-space: normal"

Вам не нужны обрывы строк в тексте. В IE это будет ошибочно: "Загрузить за $ 4.99". Кроме того, этот трюк не работает для некоторых других браузеров, как вы можете видеть здесь.

У него есть это уже в конце его свойств CSS.

Brian · Answer 4 · 2013-10-03T12-04-00.000Z

Вы также можете попробовать добавить это в список свойств CSS:

display: table\9;

Это CSS-хак, предназначенный только для IE.

Я бы предложил сделать что-то вроде предложения Гарри Робертса, чтобы использовать файл shame.css, который специфичен для IE. Таким образом, упрощается поддержка CSS в качестве поддержки версии IE, медленно снижается.

2Truth · Answer 5 · 2013-10-03T12-04-00.000Z

Какую версию IE вы используете? У IE всегда есть проблемы, если вы не используете последнюю версию. Не уверен, что это сработает, но попробуйте добавить это в свой CSS.

        clear:both;

Если это не сработает, JFIDDLE и дайте мне посмотреть.

Обновление ответа, более старые версии IE не принимают новый CSS, на самом деле IE прикосновен к работе. Иногда javascript должен быть реализован, но иногда это не сработает. Еще одна вещь, которую вы могли бы попробовать:

      word-wrap: normal;
      word-wrap: break-word;
      word-wrap: inherit;

Если все остальное не удается, JFIDDLE ваш сайт, и я посмотрю.

Snake Eyes · Answer 6 · 2013-10-03T11-38-00.000Z

Это проблема, если вы используете width?

.paypalOrderSubmitButton {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    line-height: 100%;
    font-weight: normal;
    border-radius: 0.5em;
    padding: .5em 2em .55em;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    color: white!important;
    border: solid 1px #DA7C0C;
    background: #FAA51A;
    white-space: normal;
    width: 120px;  // I have added one here additional
}

Конечно: скрипка