Question

我的文本在flexbox / span排列(the reason for which is explained here)中有点不寻常，并且没有在Safari中显示。在我尝试过的所有其他浏览器中，它看起来都不错。

这似乎是一个常见的问题，但是我已经应用了most of the suggestions are to include different display:flex options，但仍然无法使用。

有人有什么主意吗？

HTML

Option Explicit

Dim wb As Workbook
Dim ws As Worksheet

Private Sub CommandButton1_Click()
    Dim Ret As Variant

    '~~> Browse the excel file
    Ret = Application.GetOpenFilename("Excel Files (*.xls*), *.xls*")

    If Ret = False Then Exit Sub Else TextBox1.Text = Ret

    ComboBox1.Clear

    '~~> Open the workbook and hide it
    Application.ScreenUpdating = False
    Set wb = Workbooks.Open(TextBox1.Text)
    ActiveWindow.Visible = False
    ThisWorkbook.Activate
    Application.ScreenUpdating = True

    '~~> Add the worksheet names to the combobox
    For Each ws In wb.Worksheets
        ComboBox1.AddItem ws.Name
    Next ws

    '~~> Set the min and max for the scrollbars
    SBVert.Min = 1
    SBVert.Max = wb.Sheets(1).Columns.Count

    SBHorz.Min = 1
    SBHorz.Max = wb.Sheets(1).Rows.Count
End Sub

'~~> Trap Scrollbar Changes
Private Sub SBHorz_Change()
    GetRangeToDisplay SBVert.Value, SBHorz.Value
    DoEvents
End Sub

'~~> Trap Scrollbar Changes
Private Sub SBVert_Change()
    GetRangeToDisplay SBVert.Value, SBHorz.Value
    DoEvents
End Sub

'~~> On exit close the ghidden file
Private Sub UserForm_Terminate()
    If Not wb Is Nothing Then wb.Close (False)
End Sub

'~~> User selects the worksheet
Private Sub ComboBox1_Click()
    If ComboBox1.ListIndex = -1 Then Exit Sub

    Set ws = wb.Sheets(ComboBox1.Value)

    GetRangeToDisplay 1, 1
End Sub

'~~> Get the address of the range to display
Sub GetRangeToDisplay(fr As Long, fc As Long)
    If ws Is Nothing Then Exit Sub

    Dim RowHeight As Long, ColWidth As Long
    Dim tmpWidth As Long, tmpRow As Long
    Dim rngToDisplay As Range
    Dim displayedLastRow As Long, displayedLastCol As Long

    '~~> Max width/height of the range to display
    '~~> Change this as applicable
    '~~> Choose these numbers carefully as they will
    '~~> impact how the image looks like in the image control
    Const MaxWidthToDisplay As Integer = 255
    Const MaxHeightToDisplay As Integer = 409

    displayedLastRow = fr: displayedLastCol = fc

    Do
        displayedLastRow = displayedLastRow + 1
        displayedLastCol = displayedLastCol + 1

        tmpWidth = ColWidth + ws.Columns(displayedLastCol).ColumnWidth
        tmpRow = RowHeight + ws.Rows(displayedLastRow).RowHeight

        If Not tmpWidth > MaxWidthToDisplay Then _
        ColWidth = ColWidth + ws.Columns(displayedLastCol).ColumnWidth

        If Not tmpRow > MaxHeightToDisplay Then _
        RowHeight = RowHeight + ws.Rows(displayedLastRow).RowHeight

        If tmpWidth > MaxWidthToDisplay And _
        tmpRow > MaxHeightToDisplay Then Exit Do
    Loop

    Set rngToDisplay = ws.Range(ws.Cells(fr, fc), _
                       ws.Cells(displayedLastCol, displayedLastCol))

    DisplayRange rngToDisplay
End Sub

'~~> Function to export range as an image and then load
'~~> that image in the image control
Sub DisplayRange(r As Range)
    Dim wsChart As Worksheet
    Dim fname As String

    '~~> This is the temp sheet where the temp chart will be created
    Set wsChart = ThisWorkbook.Sheets("Sheet2")

    '~~> Save location
    fname = ThisWorkbook.Path & "\temp.jpg"

    '~~> Copy selection and get size
    r.CopyPicture xlScreen, xlBitmap

    '~~> Create a chart and paste the copied image to a chart
    '~~> Finally export the chart and save it as an image
    With wsChart
        Dim chtObj As ChartObject
        Set chtObj = .ChartObjects.Add(100, 30, 400, 250)

        With chtObj
            .Width = r.Width: .Height = r.Height
            .Chart.Paste
            .Chart.Export Filename:=fname, FilterName:="jpg"
            .Delete
        End With

        DoEvents
    End With

    '~~> Load the image in the image control
    Image1.Picture = LoadPicture(fname)
End Sub

CSS

<h1>
   <span id="firstspan">this</span>
   <span id="secondspan">phrase</span>
</h1>

Answer 1

这是解决方法：

h1 {
   font-family: 'Fugaz One', serif;
   font-weight:300;
   position: absolute;
   transform: rotate(-7.7deg);
   color: transparent;
   -webkit-background-clip: text;
   background-clip: text;
   background-image: -webkit-linear-gradient(8deg, #d58da3, #fa8567, #fa9551); 
   background-image:    -moz-linear-gradient(8deg, #d58da3, #fa8567, #fa9551); 
   background-image:     -ms-linear-gradient(8deg, #d58da3, #fa8567, #fa9551); 
   background-image:      -o-linear-gradient(8deg, #d58da3, #fa8567, #fa9551);  
   background-image:         linear-gradient(8deg, #d58da3, #fa8567, #fa9551); 
   background-position-y: 1vw;
   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
   display: -ms-flexbox;      /* TWEENER - IE 10 */
   display: -webkit-flex;     /* NEW - Chrome */
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   
   font-size: 17.3vw;
   left: -2vw;
   top: calc(270px - 20vw); /*a smaller vw and it will move up as you shrink, a smaller px and it will shift up*/
}

#secondspan {
   font-size: 13.7vw;
   margin-left: -1vw;
   margin-top: -10.5vw;
}

<h1>
   <span id="firstspan">this</span>
   <span id="secondspan">phrase</span>
</h1>

为什么我的Flexbox无法在野生动物园中显示？

1 个答案: