属性'border：none'在Safari浏览器中无法正常运行

Question

在Safari浏览器中应用属性“ border：none”时遇到一些问题。 我试图将名为'profile-label'的css类应用到标签'label'中，该属性具有'border：none'属性，如下面的代码所示：

.profile-label {
  border: none;
  cursor: pointer;
}

<label for="photo" class="profile-label" type="submit">
     <img src="https://picsum.photos/536/354" alt="Foto" width="50" height="50" class="profile-photo" /> 
     <input type="file" id="photo" hidden  name="ProfileImage"/>
</label>

该属性在野生动物园中无法正常使用（边界：无），但在所有其他浏览器中均能正常运行。有人知道为什么吗？

在野生动物园浏览器中带有边框的图像：

Answer 1

您可能想尝试将以下属性添加到CSS：

# FORGE CONFIG (DO NOT REMOVE!)
include forge-conf/www.example.com/before/*;

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name www.example.com;
    server_tokens off;
    root /home/forge/www.example.com/public;

    # FORGE SSL (DO NOT REMOVE!)
    ssl_certificate /etc/nginx/ssl/www.example.com/824182/server.crt;
    ssl_certificate_key /etc/nginx/ssl/www.example.com/824182/server.key;

    ssl_protocols TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384;
    ssl_prefer_server_ciphers on;
    ssl_dhparam /etc/nginx/dhparams.pem;
    
    add_header Last-Modified $date_gmt;
    if_modified_since off;
    etag off;
    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";
    add_header Strict-Transport-Security 'max-age=31536000; includeSubDomains; preload' always;

    index index.html index.htm index.php;

    charset utf-8;

    # FORGE CONFIG (DO NOT REMOVE!)
    include forge-conf/www.example.com/server/*;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    access_log off;
    error_log  /var/log/nginx/www.example.com-error.log error;

    error_page 404 /index.php;

    location ~ \.php$ {
        try_files $query_string/index.php =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        fastcgi_index index.php;
        include fastcgi_params;
    }
    
    # browser caching of static assets
    location ~* \.(ico|css|js|json|gif|jpeg|jpg|png|woff|ttf|otf|svg|woff2|eot)$ {   
        expires 30d;                                                                                            
        access_log off;
        add_header Pragma public;
        add_header Cache-Control "public, max-age=2592000";
    } 

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

# FORGE CONFIG (DO NOT REMOVE!)
include forge-conf/www.example.com/after/*;

虽然不确定我能回答为什么发生这种情况。

Answer 2

由于标签将图像包装为type =“ submit”属性，因此显示了按钮边框。

Safari正在添加所有按钮的默认样式。

尝试添加-webkit-appearance: none；您的标签样式

或删除属性type=submit