Javascript 如何使safari浏览器与salesforce兼容。？_Javascript_Css_Safari_Salesforce

Javascript 如何使safari浏览器与salesforce兼容。？

javascript css safari salesforce

Javascript 如何使safari浏览器与salesforce兼容。？,javascript,css,safari,salesforce,Javascript,Css,Safari,Salesforce,我有一个问题，比如我的应用程序在chrome中运行良好，但在safari浏览器中，我的保存和取消按钮与原始位置不符，或者没有正确对齐。我的应用程序是在salesforce开发的，所以我需要帮助。我附加了一个截图这页，所以我们将帮助更好地理解这个问题含铬狩猎下面是保存和取消的html代码此语义使用HTML5标记，并使用网格缩放元素截图： //HTML <!DOCTYPE html> <html> <head> <link rel

我有一个问题，比如我的应用程序在chrome中运行良好，但在safari浏览器中，我的保存和取消按钮与原始位置不符，或者没有正确对齐。我的应用程序是在salesforce开发的，所以我需要帮助。我附加了一个截图这页，所以我们将帮助更好地理解这个问题

含铬

狩猎

下面是保存和取消的html代码

此语义使用HTML5标记，并使用网格缩放元素

截图：

//HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="index.css">
</head>
<body>  
    <section id="main">
        <header>
            <h1>New Job</h1>
            <h2>Job Summary</h2>
            <hr>
        </header>
        <section id="widgets">
            <section id="area1">
                <form>
                    <input type="text" name="customer_location" placeholder="Customer & Location">
                    <input type="text" name="contact" placeholder="Contact">
                    <input type="text" name="asset" placeholder="Asset">
                </form>
            </section>
            <section id="area2">
                <form>
                    <textarea placeholder="Job Description"></textarea>
                    <p id="count">4096 remaining characters</p>
                </form>
            </section>
        </section>
    </section>
    <aside>
        <button onclick="">Save</button>
        <button onclick="">Cancel</button>
    </aside>
</body>
</html>

这与浏览器兼容性有关。。。此链接将告诉您HTML/CSS是否与每个浏览器及其版本兼容。如果你发布你的代码，我可以帮你，但我不知道你的代码是什么样子，只是看一个屏幕截图并没有多大帮助。下面是css中的保存和取消按钮。什么？发布你的HTML/CSSi已经发布了我的csskk。您正在使用

html标记吗？或

h1,h2,h3,h4,h5,h6,p{
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
}
body{
    margin: 0;
    height: 100vh;
    width: 100vw;

    display: -webkit-flex;
    display: flex;

}   
#main{
    display: -webkit-flex;
    display: flex;

    -webkit-flex: 80;
    flex: 80;

    padding: 3em;

    -webkit-flex-direction: column;
    flex-direction: column;
}
h1{
    color: #fff;
    padding-left: 1em;
    font-size: 3em;
    background: #31D2D2;
}
h2{
    color: #7C7C7C;
}
#widgets{
    display: -webkit-flex;
    display: flex;

    -webkit-flex: 1;
    flex: 1;


}

#area1{
    display: -webkit-flex;
    display: flex;

    -webkit-flex: 20;
    flex: 20;

    padding: 1em;

    -webkit-flex-direction: column;
    flex-direction: column;
}
#area2{
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    padding: 1em;

    -webkit-flex: 80;
    flex: 80;   

}
form{
    cursor: default !important;

    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    background: #ECF0F1;

    -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    padding: 1.3em;
}
form>input{ 
    height: 2.5em;
    margin: 0.2em 0;
    font-size: 1em;
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
    text-align: center;
    border: 1px solid #d5dadc;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    color: #7C7C7C;
    outline: none;
}
button{
    height: 2.5em;
    margin: .5em 1em;
    padding: 0;
    font-size: 1em;
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
    cursor: pointer;
    outline: none;
    border: none;
    color: #fff;
    border-radius: 2px;
    -webkit-border-radius: 2px;
}
aside>button:nth-of-type(1){
    background: #2ECC71;
}

aside>button:nth-of-type(2){
    background: #7C7C7C;
}

aside>button:nth-of-type(1):hover{
    background: #40D47E;
}
aside>button:nth-of-type(2):hover{
    background: #9A9999;
}
button:active{
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
textarea{
    height: 10em;
    max-width: 100%;
    border: 1px solid #d5dadc;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    color: #7C7C7C;
    outline: none;
        font-size: 1em;
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;

}
#count{
    font-style: italic;
    color: #ccc;
}
aside{
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    -webkit-justify-content: flex-end;
    justify-content: flex-end;


    -webkit-flex: 20;
    flex: 20;

    z-index: 999;
    -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    background: #ECF0F1;    


}