替換transform：翻譯（）

我需要修改我的Css。這是我的CSS替換transform：翻譯（）

.msg { 
    background-color: #fff; 
    border: 3px solid #fff; 
    display: inline-block; 
    left: 50%; 
color:#123456; 
    opacity: 0; 
    padding: 35px; 
    position: fixed; 
    text-align: justify; 
    top: 40%; 
    visibility: hidden; 
    z-index: 10; 

    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
}

如何刪除下面的部分，仍然得到同樣的結果？

-webkit-transform: translate(-50%, -50%); 
-moz-transform: translate(-50%, -50%); 
-ms-transform: translate(-50%, -50%); 
-o-transform: translate(-50%, -50%); 
transform: translate(-50%, -50%);

來源

2014-03-04 Liyana Natalie

爲什麼你需要刪除轉換代碼？當你自己刪除它時，哪些功能會中斷？ – TylerH

該部分導致.msg中的文本看起來很模糊。當我嘗試刪除這部分文本是正常的。 –

由於元素被定位爲'fixed'，所以唯一的方法是指定顯式的'height'和'width'，並在每一邊使用負邊距來將元素保留在頁面中間。 –

如果你可以爲.msg定義一個特定的高度，這可能工作。

.msg { 
    background-color: #fff; 
    border: 3px solid #fff; 
    display: inline-block; 
    height:200px; /*If you can define this*/ 
    width:200px; /*and this*/ 
    top:calc(40% - 100px); /*then use calc() to subtract half of .msg from top*/ 
    left:calc(50% - 100px); /*then use calc() to subtract half of .msg from top*/     
    color:#123456; 
    opacity: 0; 
    padding: 35px; 
    position: fixed; 
    text-align: justify; 
    visibility: hidden; 
    z-index: 10; 
}

來源

2014-03-04 20:46:10

我只使用寬度和left.calc - 它完美地工作......謝謝。 –

@LiyanaNatalie無需使用CSS3'calc（）'函數（因爲它不適用於IE8-）。正如我所指出的，你可以使用負邊距作爲邊距：-100px; margin-left：-100px;'。 –

替換transform：翻譯（）

回答

相關問題