В настоящее время я стилю элемент <input type='button'/> со следующим CSS:
background: transparent url(someimage);
color: transparent;
Я хочу, чтобы кнопка отображалась как изображение, но я не хочу, чтобы текст value отображался поверх нее. Это отлично подходит для Firefox, как и ожидалось. Однако в Internet Explorer 6 и Internet Explorer 7 я все еще вижу текст.
Я пробовал всевозможные трюки, чтобы скрыть текст, но безуспешно. Есть ли способ заставить Internet Explorer вести себя?
(Я вынужден использовать type=button, потому что это форма Drupal, и его форма API не поддерживает тип изображения.)
Почему вы включаете атрибут value вообще? Из памяти вам не нужно указывать его (хотя стандарты HTML могут сказать, что вы это делаете - не уверены). Если вам нужен атрибут value, почему бы просто не указать value=""?
Если вы примете этот подход, вашему CSS потребуется дополнительные свойства для высоты и ширины фонового изображения.
Я использую
button {text-indent:-9999px;}
* html button{font-size:0;display:block;line-height:0} /* ie6 */
*+html button{font-size:0;display:block;line-height:0} /* ie7 */
У меня была противоположная проблема (работала в Internet Explorer, но не в Firefox). Для Internet Explorer вам нужно добавить левое дополнение, а для Firefox вам нужно добавить прозрачный цвет. Итак, вот наше комбинированное решение для кнопки значка 16px x 16px:
input.iconButton
{
font-size: 1em;
color: transparent; /* Fix for Firefox */
border-style: none;
border-width: 0;
padding: 0 0 0 16px !important; /* Fix for Internet Explorer */
text-align: left;
width: 16px;
height: 16px;
line-height: 1 !important;
background: transparent url(../images/button.gif) no-repeat scroll 0 0;
overflow: hidden;
cursor: pointer;
}
а
font-size: 0;
line-height: 0;
работа потрясающая для меня!
Вы пытались установить свойство text-indent на что-то вроде -999em? Это хороший способ "скрыть" текст.
Или вы можете установить размер шрифта равным 0, который тоже будет работать.
http://www.productivedreams.com/ie-not-intepreting-text-indent-on-submit-buttons/
Разница, которую некоторые из вас видят в решениях, которые работают или нет в разных IE, может быть связана с включением или отключением режима совместимости. В IE8 текстовый отступ работает только в режиме , если не включен. Если режим совместимости включен, то размер шрифта и высота строки делают трюк, но могут испортить отображение Firefox.
Таким образом, мы можем использовать css-хак, чтобы позволить firefox игнорировать наше правило ie.. так...
text-indent:-9999px;
*font-size: 0px; line-height: 0;
Применение кнопки font-size: 0.1px; для меня работает в Firefox, Internet Explorer 6, Internet Explorer 7 и Safari. Ни одно из других решений, которые я нашел, не работало во всех браузерах.
Используйте условные операторы в верхней части документа HTML:
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
Затем в CSS добавьте
.ie7 button { font-size:0;display:block;line-height:0 }
Взято из HTML5 Boilerplate - более конкретно paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Я заметил это где-то:
добавление текстового преобразования для ввода, чтобы удалить его
input.button {
text-indent:-9999px;
text-transform:capitalize;
}
Напишите в свой файл CSS:
#your_button_id
{
color: transparent;
}
Это работает в Firefox 3, Internet Explorer 8, режиме совместимости Internet Explorer 8, Opera и Safari.
* Примечание: ячейка таблицы, содержащая это, имеет padding:0 и text-align:center.
background: none;
background-image: url(../images/image.gif);
background-repeat:no-repeat;
overflow:hidden;
border: NONE;
width: 41px; /*width of image*/
height: 19px; /*height of image*/
font-size: 0;
padding: 0 0 0 41px;
cursor:pointer;
overflow:hidden и padding-left работают отлично для меня.
Для Firefox:
width:12px;
height:20px;
background-image:url(images/arrow.gif);
color:transparent;
overflow:hidden;
border:0;
Для IE:
padding-left:1000px;
color:transparent; /* For FF */
*padding-left:1000px ; /* FOR IE6,IE7 */
У меня была такая же проблема. И как сообщалось много других сообщений: трюк для заполнения работает только для IE.
font-size:0px все еще показывает некоторые маленькие точки.
Единственное, что сработало для меня, - это сделать противоположное
font-size:999px
... но у меня были только кнопки размером 25x25 пикселей.
Вместо этого просто сделайте hook_form_alter и сделайте кнопку кнопкой изображения, и все будет готово!
Это лучшее для меня:
HTML
<input type="submit"/>
CSS
input[type=submit] {
background: url(http://yourURLhere) no-repeat;
border: 0;
display: block;
font-size:0;
height: 38px;
width: 171px;
}
Если вы не установите value на свой <input type="submit"/>, он поместит текст по умолчанию "Отправить" внутри вашей кнопки. SO, просто установите font-size: 0; в свой submit, а затем убедитесь, что вы установили height и width для своего типа ввода, чтобы отображалось ваше изображение. НЕ забывайте, что медиа-запросы для вашей отправки, если они вам нужны, например:
CSS
@media (min-width:600px) {
input[type=submit] {
width:200px;
height: 44px;
}
}
Это означает, что когда экран имеет ровно 600 пикселей ширину или больше, кнопка изменит размеры
color:transparent;, а затем любое свойство text-transform тоже делает трюк.
Например:
color: transparent;
text-transform: uppercase;