解决Safari浏览器中submit按钮样式和Windows中看到的样式不同的问题

最新推荐文章于 2024-07-10 14:03:37 发布

灰度1024

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量284

点赞数

文章标签： safari 前端

本文链接：https://blog.csdn.net/qq_43587076/article/details/128898273

版权

Safari中button样式问题

按钮在iPhone的safari浏览器下圆角有一个bug

解决方法：加入下面代码

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
-webkit-appearance: none;
}

关于"-webkit-appearance"对button的影响参考下图

请添加图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

灰度1024

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决Safari浏览器中submit按钮样式和Windows中看到的样式不同的问题

按钮在iPhone的safari浏览器下圆角有一个bug。解决方法：加入下面代码。
复制链接

扫一扫

safari 样式不一致_改善CSS的10种最佳做法，帮助你从样式中获得最大的收益。

weixin_39524703的博客

01-13

1050

翻译：英文 | https://medium.com/better-programming/10-best-practices-for-improving-your-css-84c69aac66eCSS似乎是一种非常简单的语言，很难在其中犯错误。你只需添加样式规则，就可以对网站进行样式设置了，对吗？对于只需要几个CSS文件的小型网站，情况可能就是这样。但是在大型应用程序中，样式可能会迅速失控。你如...

苹果iPhone safari浏览器样式重置修复submit按钮圆角bug

09-25

刚接触写手机页面或许都会遇到iPhone的safari浏览器上submit按钮圆角bug，下面为大家介绍苹果浏览器样式如何重置submit，需要的朋友可以参考下

参与评论您还未登录，请先登录后发表或查看评论

关闭safari浏览器button默认样式

weixin_34303897的博客

09-06

622

前两天又遇到一个头疼的问题，在Chrome上调试好的样式，去到手机上打开，傻了。。。这是什么鬼... 搜了一下,才知道这是appearance属性搞的鬼。。。比方你想让一个div拥有button的样式。能够这么写 div { appearance: button; -moz-appearance:button; /...

Bug: Safari浏览器input框placeholder和内容都不显示

彭世瑜的博客

06-24

1602

input 增加一个样式 line-height:1

苹果浏览器样式重置submit

weixin_30487701的博客

03-18

127

苹果浏览器按钮样式问题

zhangwenjie1105的专栏

04-29

800

input{ -webkit-appearance: none; }

去掉iphone Safari浏览器下input submit 和按钮的圆角

上官飞蓬的博客

07-20

1415

在Iphone的Safari浏览器下查看网页时，会看到input框有圆角，但其他浏览器上没有圆角，如果希望页面在所有浏览器上看的效果一致，可以在input样式下加上这段css代码。 .classinput{ -webkit-appearance: none;/****告诉浏览器我们不希望按钮按苹果的默认UI来渲染。*****/ border-radius: 0; }

sumbit圆角html,修复iPhone的safari浏览器上submit按钮圆角bug

weixin_34457338的博客

06-27

206

该楼层疑似违规已被系统折叠隐藏此楼查看此楼碰到一个怪异的问题——“表单中的input[type="submit"]和input[type="reset"]按钮在iPhone的safari浏览器下圆角有一个bug”。下面我来简单的描述一下这个bug的样子：初载入页面后，表单中的input[type="submit"]和input[type="reset"]按钮渲染成下图的样子：奇怪的是你点击以后就...

修复iPhone的safari浏览器上submit按钮圆角bug

01-19

一直在没有制作iPhone的页面效果了，今天在公司写了一个登录页面效果，让我碰到一个怪异的问题——“表单中的input[type=submit]和input[type=reset]按钮在iPhone的safari浏览器下圆角有一个bug”。下面我来简单的...

CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式

09-25

本篇主要讨论的是如何解决在iPhone的Safari浏览器中，表单元素如`input[type="submit"]`按钮和`input[type="text"]`文本输入框出现的默认样式问题。首先，问题在于iPhone的Safari浏览器对表单元素有自己的默认样式...

safari 浏览器overflow：hidden样式失效，一个css属性完美解决

wang_9909的博客

06-27

2098

safari浏览器的样式，总会时不时给你一个“小惊喜”。例如：之前就遇到了safari的一个overflow：hidden样式失效的问题。百度一看，这个问题遇到的人很多，没想到10多年前就出现的问题，现在还会出现（我的出现问题的safari浏览器版本 14.1.2）。网上对其有着各种各样的帖子，但是其大多数都是以下方案：可能这些方案能很好的解决其他浏览器版本，但是当我用到我这个特定版本时（14.1.2），这些“优秀”的方案却无法解决我的问题。一个“不常见”的css样式却可以完美解决！！！！！......

用css去除chrome、safari等webikt内核浏览器的默认样式

sinat_33337475的博客

06-05

7928

在制作手机网站的时候用Safari 打开相应的页面，发现button,input,select,textarea都存在着默认的样式，我们设置的样式都被默认样式盖住了，这时只需要添加一个webkit的私有属性： -webkit-appearance:none; 添加该样式，并且值为'none'时即可取消浏览器对于控件的默认样式。 appearance :

Dubbo 3.x源码(22)—Dubbo服务引用源码(5)服务引用bean的获取以及懒加载原理

终生学习践行者

06-15

1440

基于Dubbo 3.1，详细介绍了Dubbo服务的发布与引用的源码，以及服务引用bean的获取以及懒加载原理

一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目

yunmoon的博客

07-10

761

Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。

Webkit简介以及工作流程

最新发布

读心悦

07-10

221

WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。

Haproxy搭建Web群集

wkysdhr的博客

07-08

894

Haproxy 是目前比较流行的一种群集调度工具，同类群集调度工具有很多，如LVS 和Nginx。相比较而言，LVS 性能最好，但是搭建相对复杂;Nginx的upstream模块支持群集功能，但是对群集节点健康检查功能不强，高并发性能没有 Haproxy好。

JS混淆基本类型和原理

朴拙科技的博客

07-06

723

混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。

设置document.body.style.zoom在Safari浏览器中无效

07-08

对不起，我之前的回答可能有误。确实，在Safari浏览器中，`document.body.style.zoom`属性不起作用。Safari浏览器不支持使用`zoom`来设置缩放比例。如果你需要在Safari浏览器中设置缩放比例，可以尝试使用CSS的`transform`属性来实现。你可以通过以下步骤来设置缩放比例： 1. 首先，在Vue组件的mounted生命周期钩子函数中添加以下代码： ```javascript mounted() { this.setSafariZoom(); } ``` 2. 接下来，定义一个名为setSafariZoom的方法，用于设置Safari浏览器的缩放比例。在该方法中，我们将使用CSS的`transform`属性来设置缩放比例： ```javascript methods: { setSafariZoom() { const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); if (isSafari) { const zoomLevel = 0.8; // 设置缩放比例，这里是80% const scaleValue = `scale(${zoomLevel})`; document.body.style.webkitTransform = scaleValue; document.body.style.transform = scaleValue; } } } ``` 在上述代码中，我们首先通过正则表达式检测当前浏览器是否为Safari。如果是Safari浏览器，我们将创建一个`scaleValue`变量，用于存储缩放比例的CSS值。然后，我们分别设置`webkitTransform`和`transform`属性为该缩放比例的值。 3. 现在，当Vue组件加载完成后，mounted生命周期钩子函数将调用setSafariZoom方法，并根据当前浏览器判断是否需要设置缩放比例。这样，当用户在Safari浏览器中访问该Vue组件时，会自动应用所设置的缩放比例。请注意，这仅适用于Safari浏览器，其他浏览器不会受到影响。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交