[DNSB]

Here's what I'm using for dropcaps. Likely not the best solution but it works for the few times I use dropcaps.

span.dropcap {
    display: inline-block; 
    float: left;
    margin-right: 0.1em;
    font-size: 3.2em; 
    line-height: 0.75em;
}

span.dropcap2 {
font-size: 400%;
font-weight: bold;
line-height: 1;
height: 1em;
float: left;
margin: -0.1em 0.125em -0.1em 0.25em;
}

My alternate is using 115x123 woodcut look graphics images for the first letter:

.lettrimg {
	float: left; 
	margin: 0 0.5em -0.1em 0.25em; 
	}

    <div class="lettrimg"><img alt="Y" src="../Images/Y.gif" /></div>

    <p class="paranon">ou can not know.</p>

I do find quite a variance in how dropcaps display on various devices so you may need to play a bit to find something that works acceptably for you.

The top part of the letter missing is likely due to your choice to hide parts of the letter that overflow the display space. Change overflow: hidden to overflow: visible to see those missing bits -- or just remove the overflow: line as visible should be the default.

Regards,
David