Что моя кнопка не отображается одинаково в разных браузерах?
Графическая кнопка:
Я пытаюсь воспроизвести эту графическую кнопку, которую нашел на веб-сайте. Однако, в отличие от веб-сайта, я хочу сделать это с помощью CSS и заставить его работать во всех существующих и популярных браузерах. Смотрите демо: https://codepen.io/Alix-Blaine/pen/wvLwxrN.
Репликация с помощью CSS:
main {
margin: 0;
width: 4.313em;
}
a {
display: block;
text-decoration: none;
text-transform: capitalize;
background-color: #666699;
font-size: 0.75em;
color: #FFF;
padding: .2em;
box-sizing: border-box;
border-bottom: 2px inset rgba(26, 25, 25, 0.8);
border-left: 2px inset rgba(0, 0, 0, .5);
border-right: 2px inset rgba(26, 25, 25, 0.8);
border-top: 2px inset rgb(255, 255, 255);
}<main>
<a href = "index.html">Twitter</a>
</main>Полученные результаты:
Хром
Fire Fox
Если вы хотите быть уверенным, что он отображается одинаково во ВСЕХ браузерах, по иронии судьбы, лучший подход — использовать изображение вместо CSS. Если вы все еще хотите пойти по этому пути, взгляните на это: Browserstack.com/guide/create-browser-specific-css
@Paulie_D, пожалуйста, прочти мою правку. Спасибо.
Разные браузеры могут отображать немного по-разному, поэтому вы видите различия в своем примере. Как сказал Виманичесир, изображение будет простой реализацией, гарантирующей единообразие внешнего вида.
Этот вопрос требует от ответчиков слишком многого, но при этом дает мало доказательств исследований. Например, по моему мнению, эти два скриншота чертовски близки к желаемому результату. Настолько близко, что мне понадобится пиксельная линейка и палитра цветов, чтобы изучить различия. Настолько близко, что я бы сказал, что мы потратим больше денег на возню с CSS, и если нам нужен такой уровень совершенства, нам следует использовать изображение.
@HereticMonkey, спасибо, но вставленные тени или границы плохо отображаются в Chrome.
Эта проблема с интерфейсом восходит к зарождению wysiwyg и «войне» за лицензии на шрифты Adobe; и ваш font-size: 0.75em; никогда не будет прежним, даже если вы используете шрифт True Type.
Вот такие детали следует отредактироватьв вопрос. Именно это имел в виду @Paulie_D, когда просил вас «уточнить вашу конкретную проблему или добавить дополнительную информацию, чтобы подчеркнуть именно то, что вам нужно». Нам нужно знать, какие вы видите конкретные проблемы с представлением CSS в каждом браузере, чтобы предложить разные CSS, а также способы их отображения только для этого браузера.
Кстати, никого не волнует, что во всех браузерах это не совсем одинаково. Из-за этого пользователи не решают, использовать сайт или нет.
Ответы 1
Я бы использовал вектор, например .svg, чтобы добиться того же общего результата и сохранить его хрустящим. Вот так:
<main>
<a href = "index.html"><svg
version = "1.1"
width = "67"
height = "21"
id = "svg17"
sodipodi:docname = "stack.svg"
inkscape:version = "1.3.2 (091e20e, 2023-11-25, custom)"
xmlns:inkscape = "http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi = "http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns = "http://www.w3.org/2000/svg"
xmlns:svg = "http://www.w3.org/2000/svg">
<defs
id = "defs17">
<rect
x = "43.82093"
y = "43.378296"
width = "306.74652"
height = "124.82326"
id = "rect19" />
<rect
x = "45.591473"
y = "51.345737"
width = "297.45117"
height = "102.24884"
id = "rect18" />
<rect
x = "49.575195"
y = "60.198448"
width = "279.3031"
height = "84.986046"
id = "rect17" />
</defs>
<sodipodi:namedview
id = "namedview17"
pagecolor = "#ffffff"
bordercolor = "#000000"
borderopacity = "0.25"
inkscape:showpageshadow = "2"
inkscape:pageopacity = "0.0"
inkscape:pagecheckerboard = "0"
inkscape:deskcolor = "#d1d1d1"
inkscape:zoom = "10.245981"
inkscape:cx = "21.179036"
inkscape:cy = "9.2231284"
inkscape:window-width = "1920"
inkscape:window-height = "974"
inkscape:window-x = "-11"
inkscape:window-y = "-11"
inkscape:window-maximized = "1"
inkscape:current-layer = "svg17" />
<rect
style = "display:inline;fill:#666695;fill-opacity:1;stroke:#000000;stroke-width:0.526527"
id = "rect20"
width = "66.461639"
height = "20.436222"
x = "0.26530051"
y = "0.30037344"
inkscape:label = "rect20" />
<path
d = "M 0.00265149,0.03543588 C 2.3997226,1.103814 1.2578846,4.0660316 1.5494423,6.111032 c 0.038134,4.430444 0.064893,8.860978 0.088974,13.291518 21.2684991,0.01725 42.5369981,0.03451 63.8054971,0.05176 0,-6.00452 0,-12.0090405 0,-18.0135608 0.456894,-0.2027749 1.591792,-1.96109364 1.549498,-1.01858235 0,6.86082175 0,13.72164315 0,20.58246515 -22.324502,0 -44.649004,0 -66.97350624,0 C 0.01415367,14.0149 0.00840258,7.0251679 0.00265149,0.03543588 Z"
fill = "#6b6973"
id = "path3"
style = "display:inline;stroke-width:0.128795;fill:#292833;fill-opacity:1" />
<path
d = "M -0.00743854,9.2933662e-4 66.997645,1.68604e-4 C 66.485559,0.47038005 65.498313,1.5512629 65.498313,1.5512629 64.056495,1.7539709 2.6794333,1.7514905 1.6690757,1.7124055 c 0,0 -1.67651424,-1.49780952 -1.67651424,-1.71147616338 z"
fill = "#ababab"
id = "path4"
style = "display:inline;stroke-width:0.128795;fill:#aaaaaa;fill-opacity:1"
sodipodi:nodetypes = "ccccc" />
<path
d = "M 0.00265149,0.03543588 C 0.58814053,0.55946512 1.1232929,1.1364982 1.6599176,1.7095289 c -0.00128,5.8940224 -0.00255,11.7880451 -0.00383,17.6820671 -0.5511443,0.531928 -1.10228854,1.063855 -1.65343281,1.595783 -1.1e-6,-6.983981 -2.2e-6,-13.9679621 -3.3e-6,-20.95194312 z"
fill = "#33334a"
id = "path5"
style = "display:inline;stroke-width:0.128795;fill:#595972;fill-opacity:1" />
<text
xml:space = "preserve"
id = "text19"
style = "font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:93.3333px;line-height:1.2;font-family:'Times New Roman';-inkscape-font-specification:'Times New Roman, ';white-space:pre;shape-inside:url(#rect19);display:inline;fill:#ffffff;stroke:none;stroke-width:4.15748"
transform = "matrix(0.12984378,0,0,0.12775574,-2.1493329,-1.2609385)"><tspan
x = "43.820312"
y = "123.89016"
id = "tspan1">Twitter</tspan></text>
</svg></a>
</main>
Пожалуйста, уточните вашу конкретную проблему или добавьте дополнительную информацию, чтобы выделить именно то, что вам нужно. Поскольку сейчас написано, трудно точно сказать, о чем вы спрашиваете.