Кнопка отправки CSS / Href кросс-браузер - PullRequest
Новая
       10

Кнопка отправки CSS / Href кросс-браузер

3 голосов
/ 18 июля 2009

Я хочу, чтобы кнопки отправки + ссылки выглядели как кнопки и одинаково во всех браузерах.

Firefox 3.5 играет хорошо. Но IE6,7,8 имеют все разные взгляды. Можете ли вы помочь мне с этой (по-видимому) простой задачей? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Crossbrowser css submit button, links</title>
    <style type="text/css">
        button {
            background:#FFE900;
            color:#000;
            padding:3px 5px 3px 5px;
            border:1px solid #000;
        }
        input {
            background:#FFE900;
            color:#000;
            padding:3px 5px 3px 5px;
            border:1px solid #000;
        }
        a {
            background:#FFE900;
            color:#000;
            padding:3px 5px 3px 5px;
            border:1px solid #000;
            text-decoration:none;
        }
    </style>
</head>
<body>
<a href="#">Buy now</a>
<input type="submit" value="Buy now" />
<button type="submit">Buy now</button>
</body>
</html>

Ответы [ 6 ]

2 голосов
/ 18 июля 2009

Вы можете заменить кнопку Отправить изображением так же, как вы делаете это фоновым изображением для ссылки. Просто избавьтесь от фона и границы, поместите background-url в селектор ввода и задайте правильную ширину и высоту. 

input{
    background-color: white;
    border: 0;
    background-image: url('blah.png');
}
1 голос
/ 29 июня 2012

Я знаю, что это старый вопрос, но недавно я столкнулся с этой проблемой и не хотел использовать какие-либо изображения в моем макете. Решение, которое я придумал (после создания блоков ссылок, как предлагали другие), заключалось в явной настройке границ, шрифтов и цветов фона. Чтобы границы соответствовали, установите их индивидуально. Первоначально я пытался использовать исходные границы, но добился большего успеха, используя сплошные границы с определенными цветами для верхнего, левого, нижнего и правого. (Я выбрал цвета в зависимости от того, что Firefox использовал для своих начальных границ.) Надеюсь, это кому-нибудь поможет. Кроме того, добавление границ границ к ссылкам и кнопкам делает их немного чище.

1 голос
/ 19 июля 2009

Я так понимаю, вы понимаете, что вы никогда не заставите их выглядеть точно одинаково, поскольку даже в Firefox 3.5 они не выглядят абсолютно одинаково для меня.

И кроме чисто стиля, у них всегда будет разное поведение. Например, кнопки будут по-разному реагировать на вкладки или нажатия (некоторые браузеры «нажимают» на текст), кнопки не будут отображать URL-адрес, на который они указывают, в отличие от ссылок, и вы можете выбрать текст ссылки, но не текст кнопка.

Вы можете довольно легко исправить самые явные различия в IE6 и 7.

Добавьте это в CSS для своих кнопок (<button> и <input>): 

overflow: visible;

Вы можете поместить его в таблицу стилей только для IE6 / 7, хотя это не должно влиять на любой другой браузер, так как visible фактически является значением по умолчанию. Но по какой-то причине это исправляет несоответствия с отступом по сравнению с таковым для ссылки в IE6 и IE7.

И добавьте следующее в CSS для ссылки. Это нужно всем браузерам, чтобы ссылка вела себя как элемент блока, как кнопки: 

display: inline-block;
1 голос
/ 18 июля 2009

Для кнопки вместо type="submit" используйте type="image".

Например: 

<button type="image" src="path_to_your_image.png">Buy now</button>

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

background-image: url('path_to_your_image.png');
0 голосов
/ 18 июля 2009

Вы всегда можете использовать среду JavaScript, чтобы заменить элемент более стилем, или использовать условные комментарии MSIE для стилей, специфичных для браузера.

Грустная правда в том, что кросс-браузерное совершенство пикселей кажется невозможным с чистым CSS и кнопками.

0 голосов
/ 18 июля 2009

Если вы хотите получить однородный внешний вид, вам нужно использовать кнопку отправки изображения.

...