Кнопка Safari имеет квадратные углы, если текст становится длиннее

#html #text #button #safari

#HTML #текст #кнопка #safari

Вопрос:

Контекст находится в Safari для Mac.

Я создаю HTML-кнопку с динамическим содержимым. Это может быть «ОК», «Отмена» или «Я вернусь позже» в зависимости от сценария. Свойству max-width присвоено значение 100 пикселей, чтобы оно не становилось слишком длинным и не портило макет. Всякий раз, когда текст кнопки становится длиннее, кнопка теряет свои закругленные углы. Я также обнаружил, что кнопка теряет свой стиль по умолчанию, если ее стиль переопределен CSS… Мне просто нужно, чтобы кнопка вела себя как есть и вмещала текст без потери закругленных углов. Кто-нибудь может мне помочь?

заранее спасибо!

Добавлен код:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Button</title>
<style>
    button{max-width:150px;}
</style>
</head>
<body>
  <button id="test">Button has a long text to test its capacity</button>
</body>
</html>
  

Комментарии:

1. Опубликуйте пока свой пример кода, пожалуйста.

2. Вставленный код. Ждем решения!

3. Отправленный ответ ожидает утверждения.

Ответ №1:

Вариант 1: обновите свой Safari. Я скопировал / вставил ваш точный код на страницу и открыл в Safari (только что скачал), и у него закругленные углы. Я также попытался увеличить максимальную ширину до 300 пикселей, и это все еще работает просто отлично — закругленные углы и все такое.

Вариант 2: Создайте кнопки со скругленными углами, используя HTML / CSS. ЭТОТ САЙТ идеально подходит для этого — он позволяет вам выбирать свои параметры, а затем загружать HTML / CSS для именно тех кнопок, которые вы хотите, — и это бесплатно. Конечно, вы можете настроить параметры самостоятельно или написать это от руки, но — это хорошая отправная точка, если вы раньше не делали кнопки со скругленными углами.